Centered Card Sign-in

<!--
  A self-contained login card. The card is w-full max-w-sm so it fills a phone
  and settles at a readable width on desktop. Every input has its own <label> -
  the placeholder is a hint, never the name.
-->
<div class="mx-auto w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950">
  <h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Sign in</h1>
  <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Welcome back. Enter your details.</p>

  <form class="mt-6 space-y-4" action="#" method="post">
    <div>
      <label for="signin-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
      <input
        id="signin-email"
        name="email"
        type="email"
        autocomplete="email"
        required
        placeholder="you@company.com"
        class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400"
      />
    </div>

    <div>
      <label for="signin-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
      <div class="relative mt-1.5">
        <input
          id="signin-password"
          name="password"
          type="password"
          autocomplete="current-password"
          required
          placeholder="••••••••"
          class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 pr-16 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400"
        />
        <!-- Toggle swaps the input type in JS; inert in this static markup. -->
        <button type="button" class="absolute inset-y-0 right-0 flex items-center px-3 text-xs font-medium text-gray-500 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:hover:text-gray-200 dark:focus-visible:ring-blue-400">Show</button>
      </div>
    </div>

    <button type="submit" class="w-full rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
      Sign in
    </button>
  </form>
</div>