Passkey sign-in with fallback

Build a passkey-first sign-in card with Tailwind CSS. Centre a max-w-sm white card with rounded-2xl corners and a soft border on a neutral-50 page. Inside: a small dark rounded logo tile, a heading reading "Sign in to Northwind", and a muted line saying the account uses a passkey. Show the remembered account as a bordered row with a round avatar initial, the email address, and a "Not you?" link on the right. Under it, a full-width dark button labelled "Continue with passkey" carrying a shield glyph, then a caption explaining the device will ask for Face ID, a fingerprint or the device PIN. Add a hairline divider with the word "or", two outline buttons for "Use a one-time code" and "Sign in with password", and a footer line about security keys. Keep every control at least 44px tall and give the buttons visible focus rings.

<div class="flex min-h-screen items-center justify-center bg-neutral-50 px-6 py-14">
  <div class="w-full max-w-sm rounded-2xl border border-neutral-200 bg-white p-7 shadow-sm">
    <div class="mb-6">
      <div class="mb-5 grid h-10 w-10 place-items-center rounded-xl bg-neutral-900 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></div>
      <h1 class="text-xl font-semibold tracking-tight text-neutral-900">Sign in to Northwind</h1>
      <p class="mt-1 text-sm text-neutral-500">This account is protected with a passkey.</p>
    </div>

    <div class="flex items-center gap-3 rounded-xl border border-neutral-200 bg-neutral-50 px-3.5 py-3">
      <span class="grid h-9 w-9 place-items-center rounded-full bg-neutral-900 text-sm font-medium text-white">R</span>
      <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium text-neutral-900">[email protected]</p>
        <p class="text-xs text-neutral-500">Last used 2 days ago</p>
      </div>
      <a href="#" class="text-xs font-medium text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Not you?</a>
    </div>

    <button class="mt-5 flex w-full items-center justify-center gap-2 rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800 focus:outline-none focus-visible:ring-4 focus-visible:ring-neutral-900/15">
      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg> Continue with passkey
    </button>
    <p class="mt-2.5 text-center text-xs leading-relaxed text-neutral-500">Your device will ask for Face ID, a fingerprint or your device PIN. Nothing leaves this machine.</p>

    <div class="my-6 flex items-center gap-3 text-xs uppercase tracking-widest text-neutral-400">
      <span class="h-px flex-1 bg-neutral-200"></span>or<span class="h-px flex-1 bg-neutral-200"></span>
    </div>

    <div class="space-y-2.5">
      <button class="w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Email me a one-time code</button>
      <button class="w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Sign in with password</button>
    </div>

    <p class="mt-6 text-center text-xs text-neutral-400">Hardware security keys are supported on this account.</p>
  </div>
</div>