30 Tailwind CSS Login Forms
09 / 30

All 30 in 30 Tailwind CSS Login Forms

  1. 01Tailwind Split-Screen Brand Hero Login Form
  2. 02Tailwind Multi-Tenant Workspace Account Switcher
  3. 03Tailwind Floating Label Login Form with peer Variants
  4. 04Tailwind Web3 Wallet Connect Login Grid
  5. 05Tailwind Minimalist Fintech Login Card with Layered Shadow
  6. 06Tailwind OAuth Social Login Form with Brand SVG Buttons
  7. 07Tailwind Passwordless Magic Link Login with data-state Machine
  8. 08Tailwind Aurora Glow Login Card with Drifting Blur Blobs
  9. 09Tailwind Neon Synthwave Arcade Login Form
  10. 10Tailwind Sliding Login and Sign Up Panel with peer-checked
  11. 11Tailwind 3D Flip Login Card with Password Reset Back Face
  12. 12Tailwind Terminal CLI Prompt Login Form
  13. 13Tailwind Floating Pill Login Widget Docked Over App Content
  14. 14Tailwind Gradient Border Login Card with background-clip
  15. 15Tailwind Slide-Over Side Panel Login without JavaScript
  16. 16Tailwind Social-First Sign Up with Brand-Compliant Buttons
  17. 17Tailwind Animated Mascot Login that Covers Its Eyes
  18. 18Tailwind Accessible Compact Login Modal with Scale-In
  19. 19Tailwind Glassmorphism Login Card with backdrop-filter
  20. 20Tailwind Multi-Step Login Wizard with Radio-Driven Track
  21. 21Tailwind Animated Conic Gradient Border Login Card
  22. 22Tailwind Secure Vault Login with user-invalid Error State
  23. 23Tailwind Neo-Brutalist Login Form with Hard Offset Shadow
  24. 24Tailwind Show Hide Password Toggle with aria-pressed
  25. 25Tailwind OTP Code Input Grid with Auto-Advance
  26. 26Tailwind Password Strength Meter with data-score Variants
  27. 27Tailwind Numeric PIN Pad Login for Kiosks and POS
  28. 28Tailwind Inline Form Validation with user-valid and user-invalid
  29. 29Tailwind Particle Constellation Login over Canvas
  30. 30Tailwind Biometric Face ID Prompt with Pulse Ripples
Pure TailwindMIT licensed

Tailwind Neon Synthwave Arcade Login Form

A dark-mode-first retro-arcade login glowing with disciplined neon: layered text shadows, a tight box glow, and a perspective grid receding into the floor. The discipline is the point — the glow lives on borders, headings and labels, never on the characters a user has to read.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tlf-09 relative w-full min-h-svh grid place-items-center overflow-hidden bg-tlf09-stage font-tlf09-body p-6">
  <div aria-hidden="true" class="absolute -left-1/2 -right-1/2 -bottom-[10%] h-[70%] bg-[linear-gradient(oklch(0.72_0.16_330/0.35)_1px,transparent_1px),linear-gradient(90deg,oklch(0.72_0.16_330/0.35)_1px,transparent_1px)] bg-[length:44px_44px] [transform:perspective(300px)_rotateX(62deg)] [mask-image:linear-gradient(black,transparent)]"></div>
  <form novalidate class="relative z-1 w-[min(380px,100%)] flex flex-col gap-4 p-8 rounded-2xl bg-tlf09-card border-[1.5px] border-tlf09-neon text-tlf09-ink shadow-[0_0_18px_oklch(0.72_0.2_330/0.5),inset_0_0_22px_oklch(0.72_0.2_330/0.12)]">
    <h1 class="text-center text-2xl font-extrabold tracking-[0.08em] text-white font-tlf09-display [text-shadow:0_0_5px_var(--color-tlf09-neon),0_0_16px_var(--color-tlf09-neon)]">PLAYER LOGIN</h1>
    <label class="flex flex-col gap-1.5"><span class="text-[11px] font-bold tracking-[0.12em] uppercase text-tlf09-neon2 [text-shadow:0_0_8px_oklch(0.8_0.14_200/0.6)]">Username</span>
      <input type="text" autocomplete="username" placeholder="neo_runner" required class="h-12 px-3.5 rounded-md text-[15px] text-white bg-tlf09-field border-[1.5px] border-tlf09-fieldedge transition-[border-color,box-shadow] duration-150 placeholder:text-tlf09-ph focus-visible:outline-none focus-visible:border-tlf09-neon focus-visible:shadow-[0_0_0_3px_oklch(0.72_0.2_330/0.35),0_0_14px_oklch(0.72_0.2_330/0.5)]"></label>
    <label class="flex flex-col gap-1.5"><span class="text-[11px] font-bold tracking-[0.12em] uppercase text-tlf09-neon2 [text-shadow:0_0_8px_oklch(0.8_0.14_200/0.6)]">Password</span>
      <input type="password" autocomplete="current-password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" required class="h-12 px-3.5 rounded-md text-[15px] text-white bg-tlf09-field border-[1.5px] border-tlf09-fieldedge transition-[border-color,box-shadow] duration-150 placeholder:text-tlf09-ph focus-visible:outline-none focus-visible:border-tlf09-neon focus-visible:shadow-[0_0_0_3px_oklch(0.72_0.2_330/0.35),0_0_14px_oklch(0.72_0.2_330/0.5)]"></label>
    <button type="submit" class="mt-1 h-12 rounded-md cursor-pointer bg-transparent border-[1.5px] border-tlf09-neon text-white text-[15px] font-extrabold tracking-[0.1em] font-tlf09-display [text-shadow:0_0_8px_var(--color-tlf09-neon)] shadow-[0_0_12px_oklch(0.72_0.2_330/0.4)] transition-[background-color,box-shadow,scale] duration-150 hover:bg-tlf09-neonwash hover:shadow-[0_0_22px_oklch(0.72_0.2_330/0.6)] active:scale-[0.985] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-tlf09-ring motion-reduce:transition-[background-color,box-shadow] motion-reduce:active:scale-100">ENTER</button>
    <p class="text-center text-[12.5px]"><a href="#" class="text-tlf09-neon2 no-underline [text-shadow:0_0_8px_oklch(0.8_0.14_200/0.5)] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tlf09-neon2">Insert coin &mdash; sign up</a></p>
  </form>
</section>
@import "tailwindcss";

@theme {
  --color-tlf09-stage: #0a0713;
  --color-tlf09-stage: oklch(0.12 0.03 300);
  --color-tlf09-card: #120b22;
  --color-tlf09-card: oklch(0.17 0.05 300);
  --color-tlf09-field: #0c0718;
  --color-tlf09-field: oklch(0.13 0.035 300);
  --color-tlf09-fieldedge: #6b4f8a;
  --color-tlf09-fieldedge: oklch(0.5 0.08 320);
  --color-tlf09-ink: #eeeaf5;
  --color-tlf09-ink: oklch(0.94 0.01 300);
  --color-tlf09-ph: #8a7ba8;
  --color-tlf09-ph: oklch(0.63 0.05 300);
  --color-tlf09-neon: #e964c4;
  --color-tlf09-neon: oklch(0.72 0.2 330);
  --color-tlf09-neon2: #5fd4e8;
  --color-tlf09-neon2: oklch(0.8 0.14 200);
  --color-tlf09-neonwash: #e964c4;
  --color-tlf09-neonwash: oklch(0.72 0.2 330 / 0.16);
  --color-tlf09-ring: #f09ad9;
  --color-tlf09-ring: oklch(0.72 0.2 330 / 0.6);
  --font-tlf09-display: 'Orbitron', system-ui, sans-serif;
  --font-tlf09-body: 'Rajdhani', system-ui, sans-serif;
}

.tlf-09 {
  width: 100%;
  min-height: 100svh;
  color-scheme: dark;
}
/* Safari mask prefix for the receding grid. */

.tlf-09 > div[aria-hidden] {
  -webkit-mask-image: linear-gradient(black, transparent);
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tlf09-stage: #0a0713;
  --color-tlf09-stage: oklch(0.12 0.03 300);
  --color-tlf09-card: #120b22;
  --color-tlf09-card: oklch(0.17 0.05 300);
  --color-tlf09-field: #0c0718;
  --color-tlf09-field: oklch(0.13 0.035 300);
  --color-tlf09-fieldedge: #6b4f8a;
  --color-tlf09-fieldedge: oklch(0.5 0.08 320);
  --color-tlf09-ink: #eeeaf5;
  --color-tlf09-ink: oklch(0.94 0.01 300);
  --color-tlf09-ph: #8a7ba8;
  --color-tlf09-ph: oklch(0.63 0.05 300);
  --color-tlf09-neon: #e964c4;
  --color-tlf09-neon: oklch(0.72 0.2 330);
  --color-tlf09-neon2: #5fd4e8;
  --color-tlf09-neon2: oklch(0.8 0.14 200);
  --color-tlf09-neonwash: #e964c4;
  --color-tlf09-neonwash: oklch(0.72 0.2 330 / 0.16);
  --color-tlf09-ring: #f09ad9;
  --color-tlf09-ring: oklch(0.72 0.2 330 / 0.6);
  --font-tlf09-display: 'Orbitron', system-ui, sans-serif;
  --font-tlf09-body: 'Rajdhani', system-ui, sans-serif;
}

.tlf-09 {
  width: 100%;
  min-height: 100svh;
  color-scheme: dark;
}
/* Safari mask prefix for the receding grid. */

.tlf-09 > div[aria-hidden] {
  -webkit-mask-image: linear-gradient(black, transparent);
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Rajdhani:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • Four arbitrary properties (text-shadow, mask-image, the 3D transform, bg-[length:…]) and not one of them is a workaround. This is the demo that shows where the utility boundary honestly sits.
  • Putting the neon in @theme means the arbitrary shadows can reference var(--color-tlf09-neon), so a retheme still touches one line despite the glow being spread across six elements.
  • Two font tokens (--font-tlf09-display, --font-tlf09-body) mint font-tlf09-display / font-tlf09-body, which is how a pairing should travel in v4.
  • UI change from the CSS original: Orbitron + Rajdhani replace the system stack (the arcade read was doing all the work with none of the type), the placeholder lifted from #6a5f85 to oklch(0.63 0.05 300), and the cyan secondary from 0.78 to 0.8 for 4.5:1 on the card.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Neon Synthwave Arcade Login Form
Source: https://codefronts.com/components/tailwind-css-login-forms/tailwind-neon-synthwave-arcade-login-form/

A dark-mode-first retro-arcade login glowing with disciplined neon: layered text shadows, a tight box glow, and a perspective grid receding into the floor. The discipline is the point &mdash; the glow lives on borders, headings and labels, never on the characters a user has to read.
## HTML
```html
<section class="tlf-09 relative w-full min-h-svh grid place-items-center overflow-hidden bg-tlf09-stage font-tlf09-body p-6">
  <div aria-hidden="true" class="absolute -left-1/2 -right-1/2 -bottom-[10%] h-[70%] bg-[linear-gradient(oklch(0.72_0.16_330/0.35)_1px,transparent_1px),linear-gradient(90deg,oklch(0.72_0.16_330/0.35)_1px,transparent_1px)] bg-[length:44px_44px] [transform:perspective(300px)_rotateX(62deg)] [mask-image:linear-gradient(black,transparent)]"></div>
  <form novalidate class="relative z-1 w-[min(380px,100%)] flex flex-col gap-4 p-8 rounded-2xl bg-tlf09-card border-[1.5px] border-tlf09-neon text-tlf09-ink shadow-[0_0_18px_oklch(0.72_0.2_330/0.5),inset_0_0_22px_oklch(0.72_0.2_330/0.12)]">
    <h1 class="text-center text-2xl font-extrabold tracking-[0.08em] text-white font-tlf09-display [text-shadow:0_0_5px_var(--color-tlf09-neon),0_0_16px_var(--color-tlf09-neon)]">PLAYER LOGIN</h1>
    <label class="flex flex-col gap-1.5"><span class="text-[11px] font-bold tracking-[0.12em] uppercase text-tlf09-neon2 [text-shadow:0_0_8px_oklch(0.8_0.14_200/0.6)]">Username</span>
      <input type="text" autocomplete="username" placeholder="neo_runner" required class="h-12 px-3.5 rounded-md text-[15px] text-white bg-tlf09-field border-[1.5px] border-tlf09-fieldedge transition-[border-color,box-shadow] duration-150 placeholder:text-tlf09-ph focus-visible:outline-none focus-visible:border-tlf09-neon focus-visible:shadow-[0_0_0_3px_oklch(0.72_0.2_330/0.35),0_0_14px_oklch(0.72_0.2_330/0.5)]"></label>
    <label class="flex flex-col gap-1.5"><span class="text-[11px] font-bold tracking-[0.12em] uppercase text-tlf09-neon2 [text-shadow:0_0_8px_oklch(0.8_0.14_200/0.6)]">Password</span>
      <input type="password" autocomplete="current-password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" required class="h-12 px-3.5 rounded-md text-[15px] text-white bg-tlf09-field border-[1.5px] border-tlf09-fieldedge transition-[border-color,box-shadow] duration-150 placeholder:text-tlf09-ph focus-visible:outline-none focus-visible:border-tlf09-neon focus-visible:shadow-[0_0_0_3px_oklch(0.72_0.2_330/0.35),0_0_14px_oklch(0.72_0.2_330/0.5)]"></label>
    <button type="submit" class="mt-1 h-12 rounded-md cursor-pointer bg-transparent border-[1.5px] border-tlf09-neon text-white text-[15px] font-extrabold tracking-[0.1em] font-tlf09-display [text-shadow:0_0_8px_var(--color-tlf09-neon)] shadow-[0_0_12px_oklch(0.72_0.2_330/0.4)] transition-[background-color,box-shadow,scale] duration-150 hover:bg-tlf09-neonwash hover:shadow-[0_0_22px_oklch(0.72_0.2_330/0.6)] active:scale-[0.985] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-tlf09-ring motion-reduce:transition-[background-color,box-shadow] motion-reduce:active:scale-100">ENTER</button>
    <p class="text-center text-[12.5px]"><a href="#" class="text-tlf09-neon2 no-underline [text-shadow:0_0_8px_oklch(0.8_0.14_200/0.5)] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tlf09-neon2">Insert coin &mdash; sign up</a></p>
  </form>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tlf09-stage: #0a0713;
  --color-tlf09-stage: oklch(0.12 0.03 300);
  --color-tlf09-card: #120b22;
  --color-tlf09-card: oklch(0.17 0.05 300);
  --color-tlf09-field: #0c0718;
  --color-tlf09-field: oklch(0.13 0.035 300);
  --color-tlf09-fieldedge: #6b4f8a;
  --color-tlf09-fieldedge: oklch(0.5 0.08 320);
  --color-tlf09-ink: #eeeaf5;
  --color-tlf09-ink: oklch(0.94 0.01 300);
  --color-tlf09-ph: #8a7ba8;
  --color-tlf09-ph: oklch(0.63 0.05 300);
  --color-tlf09-neon: #e964c4;
  --color-tlf09-neon: oklch(0.72 0.2 330);
  --color-tlf09-neon2: #5fd4e8;
  --color-tlf09-neon2: oklch(0.8 0.14 200);
  --color-tlf09-neonwash: #e964c4;
  --color-tlf09-neonwash: oklch(0.72 0.2 330 / 0.16);
  --color-tlf09-ring: #f09ad9;
  --color-tlf09-ring: oklch(0.72 0.2 330 / 0.6);
  --font-tlf09-display: 'Orbitron', system-ui, sans-serif;
  --font-tlf09-body: 'Rajdhani', system-ui, sans-serif;
}

.tlf-09 {
  width: 100%;
  min-height: 100svh;
  color-scheme: dark;
}
/* Safari mask prefix for the receding grid. */

.tlf-09 > div[aria-hidden] {
  -webkit-mask-image: linear-gradient(black, transparent);
}
```

How this works

Arbitrary properties are the correct answer here. text-shadow, mask-image and a composed perspective() transform are not design-scale values, and Tailwind ships no utilities for them. [text-shadow:…] with underscore-escaped spaces is idiomatic, not a workaround — and because the glow colour is a @theme token, retheming still happens in one place.

Glow never touches input values. Entered characters are plain white on near-black. The neon is on the heading, the labels, the borders and the button — a rule the original stated and the port preserves, because glowing 15px monospace input text is unreadable at any contrast ratio.

The grid is decoration. Two crossing linear-gradient line sets at bg-[length:44px_44px], rotated in 3D and masked to fade out, marked aria-hidden.

Make it yours

  • Retheme the whole demo from --color-tlf09-neon and --color-tlf09-neon2.
  • Glow intensity: the blur radii inside the [text-shadow:…] and shadow-[…] values.
  • Grid density: bg-[length:44px_44px].
  • Swap Orbitron for a wider display face if you want more cabinet and less terminal.

Gotchas — read before shipping

  • Never glow the input text. This is the difference between a neon demo that ships and one that gets a bug report about legibility.
  • Layer a tight core and a wide halo (0 0 5px + 0 0 16px). One huge blur reads as fuzzy, not as light.
  • Underscores, not spaces, inside every arbitrary value — [text-shadow:0_0_5px_red]. A space ends the class and the shadow silently never appears.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Layered shadows are universal; mask-image needs the -webkit- prefix in older Safari, which the stylesheet ships. Without masks the grid simply has a hard edge.

Techniques used in this demo

Utilitiesfirst-class utility or variant

text shadowtw ↗box-shadowtw ↗perspectivetw ↗linear gradienttw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →