30 Tailwind CSS Login Forms
04 / 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 Web3 Wallet Connect Login Grid

The non-traditional auth flow for crypto and AI toolkits: a tidy grid of connection tiles — MetaMask, WalletConnect, Coinbase, Ledger — in strict, uniform boxes with a hardware-accelerated lift and a brand-tinted glow on hover. Each tile's brand hue rides a --tint custom property, so four connectors need one class list, not four.

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-04 w-full min-h-svh grid place-items-center bg-tlf04-stage font-tlf04-sans text-tlf04-ink p-6">
  <div class="w-[min(440px,100%)] p-7 bg-tlf04-card border border-tlf04-edge rounded-[20px] shadow-[0_30px_70px_-44px_black]">
    <h1 class="text-[22px] font-bold tracking-tight">Connect a wallet</h1>
    <p class="mt-1.5 mb-5 text-[13.5px] text-tlf04-mut">Choose how you&rsquo;d like to sign in to the app.</p>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <button type="button" style="--tint:45" class="flex flex-col items-start gap-1.5 p-4 min-h-11 cursor-pointer text-left rounded-[14px] bg-tlf04-tile border-[1.5px] border-tlf04-tileedge text-tlf04-ink transition-[translate,box-shadow,border-color] duration-150 hover:-translate-y-[3px] hover:border-[oklch(0.62_0.16_var(--tint))] hover:shadow-[0_12px_26px_-14px_oklch(0.62_0.18_var(--tint)/0.6)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.62_0.18_var(--tint)/0.6)] motion-reduce:transition-[box-shadow,border-color] motion-reduce:hover:translate-y-0">
        <span aria-hidden="true" class="grid place-items-center size-9 rounded-[10px] text-[18px] bg-[color-mix(in_oklch,oklch(0.62_0.16_var(--tint))_22%,var(--color-tlf04-card))]">&#129418;</span>
        <span class="text-[14.5px] font-semibold">MetaMask</span>
        <span class="text-[11.5px] text-tlf04-mut">Popular</span>
      </button>
      <button type="button" style="--tint:250" class="flex flex-col items-start gap-1.5 p-4 min-h-11 cursor-pointer text-left rounded-[14px] bg-tlf04-tile border-[1.5px] border-tlf04-tileedge text-tlf04-ink transition-[translate,box-shadow,border-color] duration-150 hover:-translate-y-[3px] hover:border-[oklch(0.62_0.16_var(--tint))] hover:shadow-[0_12px_26px_-14px_oklch(0.62_0.18_var(--tint)/0.6)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.62_0.18_var(--tint)/0.6)] motion-reduce:transition-[box-shadow,border-color] motion-reduce:hover:translate-y-0">
        <span aria-hidden="true" class="grid place-items-center size-9 rounded-[10px] text-[18px] bg-[color-mix(in_oklch,oklch(0.62_0.16_var(--tint))_22%,var(--color-tlf04-card))]">&#9672;</span>
        <span class="text-[14.5px] font-semibold">WalletConnect</span>
        <span class="text-[11.5px] text-tlf04-mut">Mobile</span>
      </button>
      <button type="button" style="--tint:255" class="flex flex-col items-start gap-1.5 p-4 min-h-11 cursor-pointer text-left rounded-[14px] bg-tlf04-tile border-[1.5px] border-tlf04-tileedge text-tlf04-ink transition-[translate,box-shadow,border-color] duration-150 hover:-translate-y-[3px] hover:border-[oklch(0.62_0.16_var(--tint))] hover:shadow-[0_12px_26px_-14px_oklch(0.62_0.18_var(--tint)/0.6)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.62_0.18_var(--tint)/0.6)] motion-reduce:transition-[box-shadow,border-color] motion-reduce:hover:translate-y-0">
        <span aria-hidden="true" class="grid place-items-center size-9 rounded-[10px] text-[18px] bg-[color-mix(in_oklch,oklch(0.62_0.16_var(--tint))_22%,var(--color-tlf04-card))]">&#9673;</span>
        <span class="text-[14.5px] font-semibold">Coinbase</span>
        <span class="text-[11.5px] text-tlf04-mut">Custodial</span>
      </button>
      <button type="button" style="--tint:200" class="flex flex-col items-start gap-1.5 p-4 min-h-11 cursor-pointer text-left rounded-[14px] bg-tlf04-tile border-[1.5px] border-tlf04-tileedge text-tlf04-ink transition-[translate,box-shadow,border-color] duration-150 hover:-translate-y-[3px] hover:border-[oklch(0.62_0.16_var(--tint))] hover:shadow-[0_12px_26px_-14px_oklch(0.62_0.18_var(--tint)/0.6)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.62_0.18_var(--tint)/0.6)] motion-reduce:transition-[box-shadow,border-color] motion-reduce:hover:translate-y-0">
        <span aria-hidden="true" class="grid place-items-center size-9 rounded-[10px] text-[18px] bg-[color-mix(in_oklch,oklch(0.62_0.16_var(--tint))_22%,var(--color-tlf04-card))]">&#9638;</span>
        <span class="text-[14.5px] font-semibold">Ledger</span>
        <span class="text-[11.5px] text-tlf04-mut">Hardware</span>
      </button>
    </div>
    <p class="mt-5 text-center text-xs text-tlf04-mut">By connecting you agree to the <a href="#" class="text-tlf04-link no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tlf04-link">Terms</a>.</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tlf04-stage: #0b0d12;
  --color-tlf04-stage: oklch(0.15 0.012 265);
  --color-tlf04-card: #14171f;
  --color-tlf04-card: oklch(0.19 0.014 265);
  --color-tlf04-edge: #232734;
  --color-tlf04-edge: oklch(0.26 0.016 265);
  --color-tlf04-tile: #1b1f2a;
  --color-tlf04-tile: oklch(0.23 0.016 265);
  --color-tlf04-tileedge: #2a2f3d;
  --color-tlf04-tileedge: oklch(0.3 0.018 265);
  --color-tlf04-ink: #e8ebf3;
  --color-tlf04-ink: oklch(0.93 0.01 265);
  --color-tlf04-mut: #a2a9bd;
  --color-tlf04-mut: oklch(0.72 0.02 265);
  --color-tlf04-link: #8fb4ff;
  --color-tlf04-link: oklch(0.76 0.12 255);
  --font-tlf04-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tlf-04 {
  width: 100%;
  min-height: 100svh;
  color-scheme: dark;
}

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-tlf04-stage: #0b0d12;
  --color-tlf04-stage: oklch(0.15 0.012 265);
  --color-tlf04-card: #14171f;
  --color-tlf04-card: oklch(0.19 0.014 265);
  --color-tlf04-edge: #232734;
  --color-tlf04-edge: oklch(0.26 0.016 265);
  --color-tlf04-tile: #1b1f2a;
  --color-tlf04-tile: oklch(0.23 0.016 265);
  --color-tlf04-tileedge: #2a2f3d;
  --color-tlf04-tileedge: oklch(0.3 0.018 265);
  --color-tlf04-ink: #e8ebf3;
  --color-tlf04-ink: oklch(0.93 0.01 265);
  --color-tlf04-mut: #a2a9bd;
  --color-tlf04-mut: oklch(0.72 0.02 265);
  --color-tlf04-link: #8fb4ff;
  --color-tlf04-link: oklch(0.76 0.12 255);
  --font-tlf04-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tlf-04 {
  width: 100%;
  min-height: 100svh;
  color-scheme: dark;
}
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=Space+Grotesk:wght@400;500;600;700&display=swap">

What changed in the port

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

  • Same --tint lesson as 02, on a dark ground: the glow, the border and the focus ring are one hue per tile, and the class list is identical across all four connectors — which is the real argument for utilities on a repeated component.
  • color-scheme: dark stays in the stylesheet: it is a document-level hint (scrollbars, form controls, autofill), not a design-scale value, and there is no utility for it.
  • transition-[translate,box-shadow,border-color] then motion-reduce:transition-[box-shadow,border-color] — the reduced-motion variant narrows the transition list rather than killing it, which keeps the hover legible.
  • UI change from the CSS original: muted text went from #7c8398 (3.6:1 on the card) to oklch(0.72 0.02 265) (7.1:1), the link from oklch(0.7 0.14 250) to 0.76, and every tile gained min-h-11.
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 Web3 Wallet Connect Login Grid
Source: https://codefronts.com/components/tailwind-css-login-forms/tailwind-web3-wallet-connect-login-grid/

The non-traditional auth flow for crypto and AI toolkits: a tidy grid of connection tiles &mdash; MetaMask, WalletConnect, Coinbase, Ledger &mdash; in strict, uniform boxes with a hardware-accelerated lift and a brand-tinted glow on hover. Each tile's brand hue rides a --tint custom property, so four connectors need one class list, not four.
## HTML
```html
<section class="tlf-04 w-full min-h-svh grid place-items-center bg-tlf04-stage font-tlf04-sans text-tlf04-ink p-6">
  <div class="w-[min(440px,100%)] p-7 bg-tlf04-card border border-tlf04-edge rounded-[20px] shadow-[0_30px_70px_-44px_black]">
    <h1 class="text-[22px] font-bold tracking-tight">Connect a wallet</h1>
    <p class="mt-1.5 mb-5 text-[13.5px] text-tlf04-mut">Choose how you&rsquo;d like to sign in to the app.</p>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <button type="button" style="--tint:45" class="flex flex-col items-start gap-1.5 p-4 min-h-11 cursor-pointer text-left rounded-[14px] bg-tlf04-tile border-[1.5px] border-tlf04-tileedge text-tlf04-ink transition-[translate,box-shadow,border-color] duration-150 hover:-translate-y-[3px] hover:border-[oklch(0.62_0.16_var(--tint))] hover:shadow-[0_12px_26px_-14px_oklch(0.62_0.18_var(--tint)/0.6)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.62_0.18_var(--tint)/0.6)] motion-reduce:transition-[box-shadow,border-color] motion-reduce:hover:translate-y-0">
        <span aria-hidden="true" class="grid place-items-center size-9 rounded-[10px] text-[18px] bg-[color-mix(in_oklch,oklch(0.62_0.16_var(--tint))_22%,var(--color-tlf04-card))]">&#129418;</span>
        <span class="text-[14.5px] font-semibold">MetaMask</span>
        <span class="text-[11.5px] text-tlf04-mut">Popular</span>
      </button>
      <button type="button" style="--tint:250" class="flex flex-col items-start gap-1.5 p-4 min-h-11 cursor-pointer text-left rounded-[14px] bg-tlf04-tile border-[1.5px] border-tlf04-tileedge text-tlf04-ink transition-[translate,box-shadow,border-color] duration-150 hover:-translate-y-[3px] hover:border-[oklch(0.62_0.16_var(--tint))] hover:shadow-[0_12px_26px_-14px_oklch(0.62_0.18_var(--tint)/0.6)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.62_0.18_var(--tint)/0.6)] motion-reduce:transition-[box-shadow,border-color] motion-reduce:hover:translate-y-0">
        <span aria-hidden="true" class="grid place-items-center size-9 rounded-[10px] text-[18px] bg-[color-mix(in_oklch,oklch(0.62_0.16_var(--tint))_22%,var(--color-tlf04-card))]">&#9672;</span>
        <span class="text-[14.5px] font-semibold">WalletConnect</span>
        <span class="text-[11.5px] text-tlf04-mut">Mobile</span>
      </button>
      <button type="button" style="--tint:255" class="flex flex-col items-start gap-1.5 p-4 min-h-11 cursor-pointer text-left rounded-[14px] bg-tlf04-tile border-[1.5px] border-tlf04-tileedge text-tlf04-ink transition-[translate,box-shadow,border-color] duration-150 hover:-translate-y-[3px] hover:border-[oklch(0.62_0.16_var(--tint))] hover:shadow-[0_12px_26px_-14px_oklch(0.62_0.18_var(--tint)/0.6)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.62_0.18_var(--tint)/0.6)] motion-reduce:transition-[box-shadow,border-color] motion-reduce:hover:translate-y-0">
        <span aria-hidden="true" class="grid place-items-center size-9 rounded-[10px] text-[18px] bg-[color-mix(in_oklch,oklch(0.62_0.16_var(--tint))_22%,var(--color-tlf04-card))]">&#9673;</span>
        <span class="text-[14.5px] font-semibold">Coinbase</span>
        <span class="text-[11.5px] text-tlf04-mut">Custodial</span>
      </button>
      <button type="button" style="--tint:200" class="flex flex-col items-start gap-1.5 p-4 min-h-11 cursor-pointer text-left rounded-[14px] bg-tlf04-tile border-[1.5px] border-tlf04-tileedge text-tlf04-ink transition-[translate,box-shadow,border-color] duration-150 hover:-translate-y-[3px] hover:border-[oklch(0.62_0.16_var(--tint))] hover:shadow-[0_12px_26px_-14px_oklch(0.62_0.18_var(--tint)/0.6)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.62_0.18_var(--tint)/0.6)] motion-reduce:transition-[box-shadow,border-color] motion-reduce:hover:translate-y-0">
        <span aria-hidden="true" class="grid place-items-center size-9 rounded-[10px] text-[18px] bg-[color-mix(in_oklch,oklch(0.62_0.16_var(--tint))_22%,var(--color-tlf04-card))]">&#9638;</span>
        <span class="text-[14.5px] font-semibold">Ledger</span>
        <span class="text-[11.5px] text-tlf04-mut">Hardware</span>
      </button>
    </div>
    <p class="mt-5 text-center text-xs text-tlf04-mut">By connecting you agree to the <a href="#" class="text-tlf04-link no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tlf04-link">Terms</a>.</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tlf04-stage: #0b0d12;
  --color-tlf04-stage: oklch(0.15 0.012 265);
  --color-tlf04-card: #14171f;
  --color-tlf04-card: oklch(0.19 0.014 265);
  --color-tlf04-edge: #232734;
  --color-tlf04-edge: oklch(0.26 0.016 265);
  --color-tlf04-tile: #1b1f2a;
  --color-tlf04-tile: oklch(0.23 0.016 265);
  --color-tlf04-tileedge: #2a2f3d;
  --color-tlf04-tileedge: oklch(0.3 0.018 265);
  --color-tlf04-ink: #e8ebf3;
  --color-tlf04-ink: oklch(0.93 0.01 265);
  --color-tlf04-mut: #a2a9bd;
  --color-tlf04-mut: oklch(0.72 0.02 265);
  --color-tlf04-link: #8fb4ff;
  --color-tlf04-link: oklch(0.76 0.12 255);
  --font-tlf04-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tlf-04 {
  width: 100%;
  min-height: 100svh;
  color-scheme: dark;
}
```

How this works

Uniform boxes are a grid problem, not a padding problem. grid-cols-2 with identical p-4 on every tile means "WalletConnect" and "Ledger" produce the same box; the labels differ, the geometry cannot. The original made this point and the port keeps it verbatim.

The lift is compositor-only. -translate-y-[3px] and a box-shadow, never margin-top — a margin change would relayout the whole grid on every hover, and on a four-tile grid that is visible.

Tiles are real buttons. <button type="button"> gives Enter and Space for free and puts every connector in the tab order; the emoji and glyph chips are aria-hidden so the accessible name is the connector's own text.

Make it yours

  • Add a connector: copy a tile, change --tint and the label. The grid reflows itself.
  • One column at all sizes: drop the sm:grid-cols-2.
  • Swap the glyph chips for real wallet SVGs — the size-9 slot is already reserved.
  • Card and stage darkness live in --color-tlf04-card and --color-tlf04-stage.

Gotchas — read before shipping

  • Keep tiles as <button>s. A <div role="button"> needs a tabindex and a keydown handler to reach parity, which is three bugs waiting to happen.
  • -translate-y-[3px] needs the bracket form; there is no -translate-y-0.75.
  • Emoji glyphs render differently per platform — fine for a prototype, but ship real marks, and keep them aria-hidden either way so "fox face" is never announced.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

color-mix() tints the icon chips; without it the chip falls back to the card colour, which still reads correctly.

Techniques used in this demo

Utilitiesfirst-class utility or variant

color-mix()tw ↗box-shadowtw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗

HTML & JSno Tailwind involved

button elementMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →