Magic link request

Build a passwordless sign-in card with Tailwind CSS. Centered on a soft neutral background, max-w-sm, rounded-2xl with a thin border. Include a small rounded logo badge, a headline about signing in without a password, one email field, a full-width dark submit button, a muted info panel explaining that the link expires in 10 minutes and works once, and a footer line offering to use a password instead. Keep the tone calm and the spacing generous.

<div class="flex min-h-screen items-center justify-center bg-neutral-100 p-6">
  <div class="w-full max-w-sm rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm">
    <div class="mb-6 flex h-10 w-10 items-center justify-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 1.15 3.1a4 4 0 0 0 2.36 2.36L18.6 9.6l-3.09 1.15a4 4 0 0 0-2.36 2.36L12 16.2l-1.15-3.09a4 4 0 0 0-2.36-2.36L5.4 9.6l3.09-1.14a4 4 0 0 0 2.36-2.36L12 3Z"/><path d="m18.5 15 .55 1.45a2 2 0 0 0 1.18 1.18l1.47.55-1.47.55a2 2 0 0 0-1.18 1.18l-.55 1.47-.55-1.47a2 2 0 0 0-1.18-1.18l-1.47-.55 1.47-.55a2 2 0 0 0 1.18-1.18L18.5 15Z"/></svg></div>
    <h1 class="text-xl font-semibold text-neutral-900">Sign in without a password</h1>
    <p class="mt-1 text-sm text-neutral-500">We will email you a secure link that signs you in instantly.</p>
    <form class="mt-6 space-y-3">
      <input type="email" placeholder="[email protected]"
        class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <button class="w-full rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Email me a link</button>
    </form>
    <div class="mt-6 rounded-xl bg-neutral-50 p-3.5 text-xs leading-relaxed text-neutral-500">
      Links expire after 10 minutes and can only be used once. Check your spam folder if it does not arrive.
    </div>
    <p class="mt-6 text-center text-sm text-neutral-500">
      Prefer a password? <a href="#" class="font-medium text-neutral-900 hover:underline">Use one instead</a>
    </p>
  </div>
</div>