Complete login card.

The component#

html
<form class="mx-auto max-w-sm space-y-4 rounded-2xl border p-8"><h1 class="text-xl font-bold">Sign in</h1><label class="block text-sm font-medium">Email<input class="mt-1 w-full rounded-lg border px-3 py-2" /></label><label class="block text-sm font-medium">Password<input type="password" class="mt-1 w-full rounded-lg border px-3 py-2" /></label><button class="w-full rounded-lg bg-blue-600 py-2.5 font-semibold text-white">Sign in</button></form>

Responsive & dark#

Add dark: twins to every surface and text color (bg-white dark:bg-slate-900, border-slate-200 dark:border-slate-800). Because this recipe is pure utilities, dark mode is a per-class decision — see concepts/dark-mode-strategies|dark mode strategies.

Customization#

  • Swap palette classes to re-theme instantly
  • Adjust radii (rounded-lg → rounded-2xl) for tone
  • Add transition + state variants for polish
  • Extract into a framework component when reused 3+ times

recipes/index|Recipe index · components/index|Design components