~/css/tailwind-login-forms

6 Tailwind Login Forms

5 Tailwind1 with JSPublished 2026-10-04Free · no sign-up

Six login screens built with Tailwind utility classes: a sign-in card, a split layout with a brand panel, a dark form with provider buttons, a frosted glass panel, a verification code step and a minimal admin login.

Filter demos

01. Tailwind Sign-In Card

TailwindAuth

A centred sign-in card in Tailwind with labelled email and password fields, a forgot-password link and a full-width button. space-y utilities handle the vertical rhythm, and focus rings use ring-4 with a light tint for a soft, visible focus.

View code

<form class="w-full max-w-sm space-y-4 rounded-2xl bg-white p-7 shadow-xl shadow-slate-900/10" onsubmit="event.preventDefault()">
  <h1 class="text-2xl font-bold text-slate-900">Sign in</h1>
  <div><label for="twl-e" class="mb-1.5 block text-sm font-semibold text-slate-700">Email</label><input id="twl-e" type="email" autocomplete="email" class="w-full rounded-lg border border-slate-300 px-3 py-2.5 outline-none focus:border-blue-600 focus:ring-4 focus:ring-blue-100"></div>
  <div><div class="mb-1.5 flex justify-between text-sm"><label for="twl-p" class="font-semibold text-slate-700">Password</label><a href="#" class="font-semibold text-blue-700 hover:underline">Forgot?</a></div><input id="twl-p" type="password" autocomplete="current-password" class="w-full rounded-lg border border-slate-300 px-3 py-2.5 outline-none focus:border-blue-600 focus:ring-4 focus:ring-blue-100"></div>
  <button class="w-full rounded-lg bg-blue-600 py-3 font-bold text-white hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Sign in</button>
  <p class="text-center text-sm text-slate-600">No account? <a href="#" class="font-semibold text-blue-700 hover:underline">Sign up</a></p>
</form>

02. Tailwind Split Login

TailwindLayout

A two-column login with a gradient brand panel and the form. md:grid-cols-2 creates the split from tablet size up, and on phones the brand panel becomes a short strip above the form, so the fields are never pushed off screen.

View code

<div class="grid w-full max-w-2xl overflow-hidden rounded-2xl bg-white shadow-xl shadow-slate-900/10 md:grid-cols-2">
  <div class="flex items-center justify-between gap-4 bg-gradient-to-br from-teal-700 to-emerald-900 p-6 text-white md:flex-col md:items-start">
    <span class="text-lg font-extrabold">Harbor</span>
    <p class="text-sm md:text-xl md:font-bold md:leading-snug">Run your shop from one calm dashboard.</p>
  </div>
  <form class="space-y-3 p-7" onsubmit="event.preventDefault()">
    <h1 class="text-xl font-bold text-slate-900">Welcome back</h1>
    <label class="block text-sm font-semibold text-slate-700">Work email<input type="email" autocomplete="email" class="mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 font-normal outline-none focus:border-teal-700 focus:ring-4 focus:ring-teal-100"></label>
    <label class="block text-sm font-semibold text-slate-700">Password<input type="password" autocomplete="current-password" class="mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 font-normal outline-none focus:border-teal-700 focus:ring-4 focus:ring-teal-100"></label>
    <button class="w-full rounded-lg bg-teal-700 py-3 font-bold text-white hover:bg-teal-800">Continue</button>
  </form>
</div>

03. Tailwind Dark Login with Providers

TailwindOAuth

A dark login panel with two provider buttons, an or divider made from a flex row with two lines, and an email field. The divider uses before: and after: utilities with flex-1 so the lines stretch on either side of the word.

View code

<form class="w-full max-w-sm space-y-3 rounded-2xl border border-slate-800 bg-slate-950 p-7 text-slate-300" onsubmit="event.preventDefault()">
  <h1 class="mb-2 text-xl font-bold text-white">Log in to Studio</h1>
  <button type="button" class="flex w-full items-center justify-center gap-2 rounded-lg border border-slate-700 bg-slate-900 py-2.5 text-sm font-semibold text-slate-100 hover:bg-slate-800"><span class="h-4 w-4 rounded-full bg-[conic-gradient(#ea4335_0_25%,#fbbc05_0_50%,#34a853_0_75%,#4285f4_0)]" aria-hidden="true"></span>Continue with Google</button>
  <button type="button" class="flex w-full items-center justify-center gap-2 rounded-lg border border-slate-700 bg-slate-900 py-2.5 text-sm font-semibold text-slate-100 hover:bg-slate-800"><span class="h-4 w-4 rounded-full bg-slate-200" aria-hidden="true"></span>Continue with Apple</button>
  <p class="flex items-center gap-3 text-xs text-slate-400 before:h-px before:flex-1 before:bg-slate-800 after:h-px after:flex-1 after:bg-slate-800">or</p>
  <label class="block text-sm font-semibold">Email<input type="email" autocomplete="email" class="mt-1.5 w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2.5 font-normal text-white outline-none focus:border-violet-400"></label>
  <button class="w-full rounded-lg bg-violet-400 py-2.5 font-bold text-violet-950 hover:bg-violet-300">Email me a login link</button>
</form>

04. Tailwind Glass Login

TailwindGlass

A frosted panel over blurred colour blobs, using backdrop-blur-xl and a white border at low opacity. The panel tint is dark enough for white text to stay readable over the bright blobs, which is the usual weak point of glass designs.

View code

<div class="relative grid h-[380px] w-full max-w-md place-items-center overflow-hidden rounded-3xl bg-slate-950">
  <span class="absolute -left-10 -top-8 h-56 w-56 rounded-full bg-indigo-500 blur-sm"></span>
  <span class="absolute -bottom-10 -right-8 h-52 w-52 rounded-full bg-pink-500 blur-sm"></span>
  <form class="relative w-72 space-y-3 rounded-2xl border border-white/20 bg-slate-950/50 p-6 text-sm font-semibold text-slate-100 backdrop-blur-xl" onsubmit="event.preventDefault()">
    <h1 class="text-xl font-bold text-white">Member login</h1>
    <label class="block">Username<input autocomplete="username" class="mt-1.5 w-full rounded-lg border border-white/25 bg-black/25 px-3 py-2.5 font-normal text-white outline-none focus:border-white"></label>
    <label class="block">Password<input type="password" autocomplete="current-password" class="mt-1.5 w-full rounded-lg border border-white/25 bg-black/25 px-3 py-2.5 font-normal text-white outline-none focus:border-white"></label>
    <button class="w-full rounded-lg bg-white py-2.5 font-bold text-slate-900">Log in</button>
  </form>
</div>

05. Tailwind Verification Code

TailwindAuth

The second step of a login: six code boxes, a resend link and a verify button. Each box is labelled for screen readers, the first carries autocomplete="one-time-code", and a short script moves focus forward as digits are typed.

View code

<form class="w-full max-w-sm space-y-4 rounded-2xl bg-white p-7 text-center shadow-xl shadow-slate-900/10" onsubmit="event.preventDefault()">
  <h1 class="text-xl font-bold text-slate-900">Check your phone</h1>
  <p class="text-sm text-slate-600">Enter the 6-digit code we sent to +44 7700 900123.</p>
  <div class="flex justify-center gap-2">
    <input aria-label="Digit 1" autocomplete="one-time-code" inputmode="numeric" maxlength="1" class="twd h-12 w-10 rounded-lg border border-slate-300 text-center text-xl font-bold outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-100">
    <input aria-label="Digit 2" inputmode="numeric" maxlength="1" class="twd h-12 w-10 rounded-lg border border-slate-300 text-center text-xl font-bold outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-100">
    <input aria-label="Digit 3" inputmode="numeric" maxlength="1" class="twd h-12 w-10 rounded-lg border border-slate-300 text-center text-xl font-bold outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-100">
    <input aria-label="Digit 4" inputmode="numeric" maxlength="1" class="twd h-12 w-10 rounded-lg border border-slate-300 text-center text-xl font-bold outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-100">
    <input aria-label="Digit 5" inputmode="numeric" maxlength="1" class="twd h-12 w-10 rounded-lg border border-slate-300 text-center text-xl font-bold outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-100">
    <input aria-label="Digit 6" inputmode="numeric" maxlength="1" class="twd h-12 w-10 rounded-lg border border-slate-300 text-center text-xl font-bold outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-100">
  </div>
  <button class="w-full rounded-lg bg-blue-600 py-3 font-bold text-white hover:bg-blue-700">Verify</button>
  <p class="text-sm text-slate-600">Did not get it? <a href="#" class="font-semibold text-blue-700 hover:underline">Send a new code</a></p>
</form>

const ds = [...document.querySelectorAll('.twd')];
ds.forEach((d, i) => {
  d.addEventListener('input', () => { d.value = d.value.replace(/\D/g, ''); if (d.value && ds[i + 1]) ds[i + 1].focus(); });
  d.addEventListener('keydown', e => { if (e.key === 'Backspace' && !d.value && ds[i - 1]) ds[i - 1].focus(); });
});

06. Tailwind Minimal Login

TailwindMinimal

An understated login for admin panels: uppercase labels, underline fields and a text-style button. Focus is shown with a thicker amber underline so the minimal style does not cost keyboard users their sense of where they are.

View code

<form class="w-72 space-y-5 text-xs font-medium uppercase tracking-[0.12em] text-slate-400" onsubmit="event.preventDefault()">
  <p class="text-2xl font-extrabold normal-case tracking-normal text-white">Admin</p>
  <label class="block">Username<input autocomplete="username" class="mt-1 block w-full border-0 border-b border-slate-600 bg-transparent px-0 py-2 text-base normal-case tracking-normal text-white outline-none focus:border-b-2 focus:border-amber-400"></label>
  <label class="block">Password<input type="password" autocomplete="current-password" class="mt-1 block w-full border-0 border-b border-slate-600 bg-transparent px-0 py-2 text-base normal-case tracking-normal text-white outline-none focus:border-b-2 focus:border-amber-400"></label>
  <button class="py-2 text-sm font-bold normal-case tracking-wide text-amber-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-amber-400">Enter &rarr;</button>
</form>

About these Tailwind Login Forms

Spacing with space-y

space-y-4 on the form adds consistent vertical gaps between fields without margins on each element. Labels wrap their inputs in several demos, which links them without needing ids.

Responsive split

The split layout is one column by default and two from the md breakpoint with md:grid-cols-2. On phones the brand panel becomes a short strip so the form stays near the top.

Dividers without extra markup

The or divider uses before: and after: lines with flex-1 on either side of the word, so it is a single paragraph in the HTML.

Autocomplete still matters

Utility classes do not change behaviour: keep autocomplete values such as email, username, current-password and one-time-code so browsers and password managers can help people sign in.

Frequently asked questions

Are these connected to a backend?

No. They are front-end templates; set the form action or handle submit in your app.

Which demo uses JavaScript?

The verification code step, to move between digit boxes.

Do they support dark mode?

The dark demos are dark by design; add dark: variants to the light ones if your site switches themes.