<form class="card bg-base-200 p-4 max-w-96 mx-auto">
  <header>
    <h2 class="card-title">Login to your account</h2>

    <p class="text-base-content/80">Use your URL address and password to login to your account.</p>
  </header>

  <fieldset class="fieldset mt-8">
    <legend class="fieldset-legend">Your email address</legend>
    <label for="" class="input w-full">
      <span class="font-mono text-base-content/80">
        acme.org/
      </span>

      <input type="text" class="w-full" placeholder="john-doe" />
    </label>
  </fieldset>

  <fieldset class="fieldset mb-8">
    <legend class="fieldset-legend">Your password</legend>
    <input type="password" class="input w-full" placeholder="Password" />
    <a href="" class="link link-primary link-hover text-sm fieldset-label">
      Forgot your password?
    </a>
  </fieldset>

  <footer class="card-actions justify-end">
    <button class="btn btn-primary w-full">Login</button>
  </footer>
</form>

<form class="card bg-base-200 p-4 max-w-96 mx-auto">
  <header>
    <h2 class="card-title">Login to your account</h2>

    <p class="text-base-content/80">Use your email and password to login to your account.</p>
  </header>

  <fieldset class="fieldset mt-8">
    <legend class="fieldset-legend">Your email address</legend>
    <input type="text" class="input w-full" placeholder="john@doe.com" />
  </fieldset>

  <fieldset class="fieldset mb-8">
    <legend class="fieldset-legend">Your password</legend>
    <input type="password" class="input w-full" placeholder="Password" />
    <a href="" class="link link-primary link-hover text-sm fieldset-label">
      Forgot your password?
    </a>
  </fieldset>

  <footer class="card-actions justify-end">
    <button class="btn btn-primary w-full">Login</button>
  </footer>
</form>

<form class="card bg-base-200 p-4 max-w-96 mx-auto swap-on">
  <header>
    <h2 class="card-title">Login to your account</h2>

    <p class="text-base-content/80">Use your email and password to login to your account.</p>
  </header>

  <fieldset class="fieldset mt-8">
    <legend class="fieldset-legend">Your email address</legend>
    <input type="text" class="input w-full" placeholder="john@doe.com" />
  </fieldset>

  <fieldset class="fieldset mb-8">
    <legend class="fieldset-legend">Your password</legend>
    <input type="password" class="input w-full" placeholder="Password" />
    <a href="" class="link link-primary link-hover text-sm fieldset-label">
      Forgot your password?
    </a>
  </fieldset>
  <footer class="card-actions">
    <button class="btn btn-primary w-full">Login</button>
  </footer>

  <div class="divider my-8">
    OR
  </div>

  <div class="join join-vertical">
    <button class="btn btn-secondary w-full join-item">
      Login with Google
    </button>

    <button class="btn btn-soft w-full join-item">
      Login with Facebook
    </button>
  </div>
</form>

<form class="card bg-base-200 p-4 max-w-96 mx-auto">
  <header>
    <h2 class="card-title">Login to your account</h2>

    <p class="text-base-content/80">Use your email and password to login to your account.</p>
  </header>

  <div class="join join-vertical my-8">
    <label for="" class="input w-full join-item">
      <span class="font-mono text-base-content/80">acme.org/</span>
      <input type="text" class="w-full" placeholder="john-doe" />
    </label>

    <input type="email" class="input w-full join-item" placeholder="john@doe.com" />
    <input type="password" class="input w-full join-item" placeholder="•••••••••" />
  </div>

  <footer class="card-actions justify-end">
    <button class="btn btn-primary w-full">Login</button>
  </footer>
</form>

<form class="card bg-base-200 p-4 max-w-96 mx-auto">
  <header>
    <h2 class="card-title">Login to your account</h2>

    <p class="text-base-content/80">Use your email and password to login to your account.</p>
  </header>

  <fieldset class="fieldset mt-8">
    <legend class="fieldset-legend">Your email address</legend>
    <input type="text" class="input w-full" placeholder="john@doe.com" />
  </fieldset>

  <fieldset class="fieldset mb-8">
    <legend class="fieldset-legend">Your password</legend>
    <input type="password" class="input w-full" placeholder="Password" />
    <a href="" class="link link-primary link-hover text-sm fieldset-label">
      Forgot your password?
    </a>
  </fieldset>

  <footer class="card-actions justify-end">
    <div class="flex max-sm:flex-col gap-y-4 justify-between w-full mb-2">
      <label for="remember">
        <input type="checkbox" id="remember" class="checkbox checkbox-sm checkbox-primary" />
        <span>Remember me</span>
      </label>

      <a href="" class="link link-primary link-hover text-sm">Create an account</a>
    </div>

    <button class="btn btn-primary w-full">Login</button>
  </footer>
</form>