New
Sign InCentered Card Sign-in
A centred login card with email, a toggleable password field and a submit button.
#sign-in#login#card
3 frameworksBeginner
Loading…
A login card with a real "remember me" checkbox and a "forgot password?" link that wraps on mobile.
<!--
The remember/forgot row is the detail people get wrong. "Remember me" is a real
checkbox with a real <label> (click the words, not just the 16px box), and
"Forgot password?" is an <a>, not a <button> styled like a link - it navigates.
The row wraps at 320px instead of forcing a horizontal scroll.
-->
<form class="mx-auto w-full max-w-sm space-y-4 rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950" action="#" method="post">
<h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Sign in</h1>
<div>
<label for="rf-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input id="rf-email" name="email" type="email" autocomplete="email" required placeholder="you@company.com" 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>
<div>
<label for="rf-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input id="rf-password" name="password" type="password" autocomplete="current-password" required placeholder="••••••••" 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>
<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
<input type="checkbox" name="remember" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:focus-visible:ring-blue-400" />
Remember me
</label>
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-400 dark:hover:text-blue-300 dark:focus-visible:ring-blue-400">Forgot password?</a>
</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">Sign in</button>
</form>| Prop | Type | Default | Description |
|---|---|---|---|
forgotHref | string | '#' | Forgot href |
onSubmit | (data: { email: string; password: string; remember: boolean }) => void | - | Called with the form's values when it is submitted. |
className | string | - | Additional classes merged onto the root element. |
"Remember me" is a genuine checkbox with a clickable `<label>`, and "Forgot password?" is an `<a>` that navigates, not a button styled as a link. The row wraps at 320px instead of forcing a horizontal scroll; `onSubmit` receives the `remember` boolean.