Reset Password Card

<!--
  A branded reset card: a lock badge, a centred heading, one new-password field.
  The icon is aria-hidden - it decorates the heading, which already names the
  screen. w-full max-w-sm keeps it phone-first.
-->
<div class="mx-auto w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-6 text-center shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950">
  <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-6 w-6"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
  </span>
  <h1 class="mt-4 text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Reset password</h1>
  <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Choose a new password for your account.</p>

  <form class="mt-6 space-y-4 text-left" action="#" method="post">
    <div>
      <label for="rp-card-pw" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New password</label>
      <input
        id="rp-card-pw"
        name="password"
        type="password"
        autocomplete="new-password"
        required
        minlength="8"
        placeholder="At least 8 characters"
        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>

    <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">
      Reset password
    </button>
  </form>
</div>