Login — Centred card

A compact credential card with a logo, password recovery and remember-me row. Use it for a familiar sign-in page with no supporting content.

ReactHTML

1440 × 900

Open in new tab

Component.tsx26 lines

export default function LoginCenteredCard() {
  return (
    <section className="bg-neutral-50 text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-sm rounded-lg border border-neutral-200 bg-white p-6 sm:p-8">
          <div className="flex items-center gap-2 font-semibold"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg><span>Logo</span></div>
          <h1 className="mt-6 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Sign in</h1>
          <p className="mt-3 text-sm text-neutral-600">Short introduction for returning members.</p>
          <form className="mt-8 grid gap-5">
            <div><label htmlFor="login-centered-card-email" className="block text-sm font-medium text-neutral-900">Email</label><input id="login-centered-card-email" name="email" type="email" autoComplete="username" required placeholder="name@example.com" className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" /></div>
            <div>
              <div className="flex flex-wrap items-center justify-between gap-2">
                <label htmlFor="login-centered-card-password" className="block text-sm font-medium text-neutral-900">Password</label>
                <span className="text-sm"><a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Forgot password?</a></span>
              </div>
              <input id="login-centered-card-password" name="password" type="password" autoComplete="current-password" required className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
            </div>
            <label className="inline-flex items-center gap-2 text-sm text-neutral-600"><input name="remember" type="checkbox" className="size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />Remember me</label>
            <button type="submit" className="w-full inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Sign in</button>
          </form>
        </div>
        <p className="mt-6 text-center text-sm text-neutral-500">No account? <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Sign up</a></p>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for returning users who need email and password. Pick login-magic-link for passwordless entry or login-sso-first for providers. Variations: omit remember-me, add an account hint, or replace the lede with a short security note.
Hierarchy: Logo first, then a 30px semibold h1, a 14px one-line lede and the credential form. Email and Password have visible 14px labels; password recovery shares the label row. Remember me precedes the full-width Sign in action. Slots: heading up to 4 words, lede up to 10, field labels 1–3 words.
Responsive: One column at every width. Below 640px the card fills the space between the 24px gutters, uses 24px padding and a 30px heading; from 640px padding is 32px and the heading 36px. The password label row wraps if necessary.
Layout: A neutral-50 section with a 1152px max-w-6xl container, 24px gutters and 64px vertical padding, increasing to 96px at 640px. A white max-w-sm card is 384px wide with a 1px neutral-200 border, 8px radius and 24px padding, increasing to 32px at 640px. The form uses 20px gaps; the account link sits 24px below the card.
States: Inputs are 40px high with a 1px neutral-300 border, 6px radius and 14px text. The 44px primary action changes neutral-900 to neutral-700 on hover with a 150ms colour transition. Text links change to neutral-600. All controls show a 2px neutral-900 keyboard-focus outline offset 2px. The native remember-me checkbox can be checked and unchecked; there are no disabled fields.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│        ┌──────────────────────────────┐                  │
│        │ Logo                         │                  │
│        │ Sign-in headline / Lede      │                  │
│        │ Email                        │                  │
│        │ Password         [Forgot?]   │                  │
│        │ [ ] Remember me              │                  │
│        │ [Sign in                   ] │                  │
│        └──────────────────────────────┘                  │
│               No account? [Sign up]                      │
└──────────────────────────────────────────────────────────┘

View all

Login — Centred card

Pattern notes

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Context column beside form

Login — Centred card

Pattern notes

More in Login

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Context column beside form