Login Form
A clean, accessible login form built with React and Tailwind CSS, ready to copy and paste. Includes email and password fields, validation states and social sign-in buttons.
Welcome back
Copy the code
export function LoginForm() {
return (
<form className="w-64 rounded-2xl border border-white/10 bg-white/5 p-6 text-white">
<h2 className="text-lg font-extrabold">Welcome back</h2>
<input type="email" placeholder="you@company.com"
className="mt-3 w-full rounded-lg border border-white/15 bg-white/5 px-3 py-2.5 text-sm" />
<input type="password" placeholder="••••••••"
className="mt-2.5 w-full rounded-lg border border-white/15 bg-white/5 px-3 py-2.5 text-sm" />
<button className="mt-3 w-full rounded-xl bg-violet-600 py-2.5 font-bold">Sign in</button>
</form>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the login form
This login form is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.