Account chooser

Create an account chooser screen with Tailwind CSS, the kind shown when several accounts are already signed in. Centre a max-w-sm card on a neutral-50 page with a small brand tile, a "Choose an account" heading and a line naming the app requesting access. List three accounts as full-width rows: a coloured circular avatar with initials, the display name in medium weight, the email in muted small text, and on the right either a green "Active" pill or a muted "Signed out" label. Rows lift on hover with a neutral-50 background and keep a clear focus ring. Under the list, a dashed-border row with a plus glyph labelled "Use another account", then a footer with a "Sign out of all accounts" link and a line of legal text linking terms and privacy.

<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-6 shadow-sm">
    <div class="mb-6 text-center">
      <div class="mx-auto mb-4 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 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg></div>
      <h1 class="text-lg font-semibold text-neutral-900">Choose an account</h1>
      <p class="mt-1 text-sm text-neutral-500">to continue to <span class="font-medium text-neutral-700">Atlas Analytics</span></p>
    </div>

    <div class="space-y-1">
      <button class="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition hover:bg-neutral-50 focus:outline-none focus-visible:ring-4 focus-visible:ring-neutral-900/10">
        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-neutral-900 text-sm font-medium text-white">RM</span>
        <span class="min-w-0 flex-1">
          <span class="block truncate text-sm font-medium text-neutral-900">Rae Mensah</span>
          <span class="block truncate text-xs text-neutral-500">[email protected]</span>
        </span>
        <span class="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">Active</span>
      </button>

      <button class="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition hover:bg-neutral-50 focus:outline-none focus-visible:ring-4 focus-visible:ring-neutral-900/10">
        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-amber-500 text-sm font-medium text-white">JP</span>
        <span class="min-w-0 flex-1">
          <span class="block truncate text-sm font-medium text-neutral-900">Jules Park</span>
          <span class="block truncate text-xs text-neutral-500">[email protected]</span>
        </span>
        <span class="text-[11px] text-neutral-400">Signed out</span>
      </button>

      <button class="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition hover:bg-neutral-50 focus:outline-none focus-visible:ring-4 focus-visible:ring-neutral-900/10">
        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-neutral-400 text-sm font-medium text-white">DK</span>
        <span class="min-w-0 flex-1">
          <span class="block truncate text-sm font-medium text-neutral-900">Dana Køhler</span>
          <span class="block truncate text-xs text-neutral-500">[email protected]</span>
        </span>
        <span class="text-[11px] text-neutral-400">Signed out</span>
      </button>
    </div>

    <button class="mt-3 flex w-full items-center gap-3 rounded-xl border border-dashed border-neutral-300 px-3 py-3 text-left transition hover:border-neutral-400 hover:bg-neutral-50">
      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-full border border-neutral-200 text-neutral-500"><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 5v14M5 12h14"/></svg></span>
      <span class="text-sm font-medium text-neutral-700">Use another account</span>
    </button>

    <div class="mt-6 border-t border-neutral-200 pt-4 text-center">
      <a href="#" class="text-xs font-medium text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Sign out of all accounts</a>
      <p class="mt-3 text-[11px] leading-relaxed text-neutral-400">By continuing you agree to the <a href="#" class="underline">Terms</a> and <a href="#" class="underline">Privacy Policy</a>.</p>
    </div>
  </div>
</div>