29 Tailwind CSS Checkboxes
19 / 29

All 29 in 29 Tailwind CSS Checkboxes

  1. 01Tailwind CSS Toggle Switch — iOS-Style SaaS Settings
  2. 02Tailwind Filter Chip Checkbox — Style Checkbox as Button
  3. 03Tailwind Pricing Plan Card Select — Checkbox-Style Selectable Cards
  4. 04Pure Tailwind CSS Accordion with Checkbox — No JavaScript
  5. 05Tailwind Indeterminate Checkbox — Select All with Tri-State
  6. 06Accessible Custom Checkbox in Tailwind CSS — WCAG Focus Ring
  7. 07Tailwind Slide Toggle with ON/OFF Labels — GPU translate3d
  8. 08Neon Glow Checkbox in Tailwind CSS — Dark Mode Gaming UI
  9. 09Animated SVG Checkmark in Tailwind CSS — stroke-dashoffset Draw
  10. 10Bouncy Checkbox Animation in Tailwind CSS — Spring cubic-bezier
  11. 11Glassmorphism Checkbox in Tailwind CSS — backdrop-blur Frosted Glass
  12. 12Neumorphism Checkbox in Tailwind CSS — Soft UI
  13. 13Liquid Fill Checkbox Animation in Tailwind CSS — Water Wave
  14. 14Rotating Ring Checkbox in Tailwind CSS — Spin-to-Check
  15. 15Brutalist Checkbox in Tailwind CSS — Neo-Brutalism Hard Shadow
  16. 16Animated Gradient Checkbox in Tailwind CSS — Rainbow Sweep
  17. 173D Flip Checkbox in Tailwind CSS — perspective & backface-hidden
  18. 18Material Ripple Checkbox in Tailwind CSS — State Layer & Wave
  19. 19Retro Pixel Art Checkbox in Tailwind CSS — 8-Bit Arcade Menu
  20. 20Tailwind CSS To-Do List Checkbox with Animated Strikethrough
  21. 21Gooey Blob Checkbox in Tailwind CSS — blur + contrast Filter
  22. 22Tailwind Dark Mode Toggle Switch — Sun & Moon, No JavaScript
  23. 23Pulse Ring Checkbox in Tailwind CSS — Live Status Indicator
  24. 24Tailwind CSS Dash-to-Check SVG Morph Checkbox
  25. 25Tri-State Checkbox in Tailwind CSS + JavaScript — Done / N/A / Unset
  26. 26Magnetic Hover Checkbox in Tailwind CSS + JavaScript
  27. 27Confetti Checkbox Animation in Tailwind CSS — Pure CSS Particle Burst
  28. 28Slide-In Label Checkbox in Tailwind CSS — Saved Tag Reveal
  29. 29Aurora Gradient Toggle Switch in Tailwind CSS — Premium Dark UI
Pure TailwindMIT licensed

Retro Pixel Art Checkbox in Tailwind CSS — 8-Bit Arcade Menu

An arcade menu where every tick is drawn in pixels: one 3px square plus a shadow-tcb19-tick token that stamps six more. Now with the real game-menu touch — a blinking ▶ cursor that appears beside the row you're on (hover or keyboard focus), in Press Start 2P.

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="tcb-19 w-full min-h-svh grid place-items-center bg-tcb19-bg px-5 py-14 font-tcb19-pixel text-tcb19-ink selection:bg-tcb19-c selection:text-tcb19-bg" aria-label="Retro pixel checkboxes">
  <div class="w-full max-w-[25rem] border-2 border-tcb19-line bg-tcb19-panel p-3 shadow-tcb19-panel">
    <p class="px-2 pb-3 pt-1 text-[10px] tracking-[0.1em] text-tcb19-c">— PLAYER 1 —</p>
    <label class="group flex min-h-13 cursor-pointer items-center gap-3 px-1"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="w-3 text-[10px] text-tcb19-c opacity-0 group-hover:animate-tcb19-blink group-hover:opacity-100 group-has-focus-visible:animate-tcb19-blink group-has-focus-visible:opacity-100 motion-reduce:animate-none">▶</span><span aria-hidden="true" class="relative size-7 flex-none border-2 border-tcb19-box bg-tcb19-well shadow-tcb19-bevel transition-colors duration-100 ease-[steps(2)] peer-checked:border-tcb19-c peer-checked:bg-tcb19-on peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb19-c"><span class="absolute left-[5px] top-[13px] size-[3px] bg-tcb19-c opacity-0 shadow-tcb19-tick transition-opacity duration-100 ease-[steps(2)] group-has-checked:opacity-100"></span></span><span class="text-[11px] leading-5 tracking-[0.06em] group-has-checked:text-tcb19-c">INSERT COIN</span></label>
    <label class="group flex min-h-13 cursor-pointer items-center gap-3 px-1"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="w-3 text-[10px] text-tcb19-c opacity-0 group-hover:animate-tcb19-blink group-hover:opacity-100 group-has-focus-visible:animate-tcb19-blink group-has-focus-visible:opacity-100 motion-reduce:animate-none">▶</span><span aria-hidden="true" class="relative size-7 flex-none border-2 border-tcb19-box bg-tcb19-well shadow-tcb19-bevel transition-colors duration-100 ease-[steps(2)] peer-checked:border-tcb19-c peer-checked:bg-tcb19-on peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb19-c"><span class="absolute left-[5px] top-[13px] size-[3px] bg-tcb19-c opacity-0 shadow-tcb19-tick transition-opacity duration-100 ease-[steps(2)] group-has-checked:opacity-100"></span></span><span class="text-[11px] leading-5 tracking-[0.06em] group-has-checked:text-tcb19-c">CONTINUE?</span></label>
    <label class="group flex min-h-13 cursor-pointer items-center gap-3 px-1"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="w-3 text-[10px] text-tcb19-c opacity-0 group-hover:animate-tcb19-blink group-hover:opacity-100 group-has-focus-visible:animate-tcb19-blink group-has-focus-visible:opacity-100 motion-reduce:animate-none">▶</span><span aria-hidden="true" class="relative size-7 flex-none border-2 border-tcb19-box bg-tcb19-well shadow-tcb19-bevel transition-colors duration-100 ease-[steps(2)] peer-checked:border-tcb19-c peer-checked:bg-tcb19-on peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb19-c"><span class="absolute left-[5px] top-[13px] size-[3px] bg-tcb19-c opacity-0 shadow-tcb19-tick transition-opacity duration-100 ease-[steps(2)] group-has-checked:opacity-100"></span></span><span class="text-[11px] leading-5 tracking-[0.06em] group-has-checked:text-tcb19-c">EXTRA LIFE</span></label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb19-bg: #12131f;
  --color-tcb19-bg: oklch(0.18 0.025 280);
  --color-tcb19-panel: #1b1d2e;
  --color-tcb19-panel: oklch(0.22 0.03 280);
  --color-tcb19-well: #0e0f18;
  --color-tcb19-well: oklch(0.15 0.02 280);
  --color-tcb19-on: #2a2f45;
  --color-tcb19-on: oklch(0.3 0.04 275);
  --color-tcb19-line: #2f3350;
  --color-tcb19-line: oklch(0.32 0.05 278);
  --color-tcb19-box: #5a6099;
  --color-tcb19-box: oklch(0.5 0.09 278);
  --color-tcb19-ink: #c8ccec;
  --color-tcb19-ink: oklch(0.86 0.04 280);
  --color-tcb19-c: #39ff6a;
  --color-tcb19-c: oklch(0.88 0.24 145);
  --font-tcb19-pixel: 'Press Start 2P', ui-monospace, monospace;
  --shadow-tcb19-panel: 6px 6px 0 #07080e;
  --shadow-tcb19-bevel: inset -2px -2px 0 #07080e;
  --shadow-tcb19-tick: 3px 3px 0 #39ff6a, 6px 6px 0 #39ff6a, 9px 3px 0 #39ff6a, 12px 0 0 #39ff6a, 15px -3px 0 #39ff6a, 18px -6px 0 #39ff6a;
  --animate-tcb19-blink: tcb19-blink 0.8s steps(1) infinite;

  @keyframes tcb19-blink {
    0%,
        100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-19 {
  width: 100%;
  min-height: 100svh;
}

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-tcb19-bg: #12131f;
  --color-tcb19-bg: oklch(0.18 0.025 280);
  --color-tcb19-panel: #1b1d2e;
  --color-tcb19-panel: oklch(0.22 0.03 280);
  --color-tcb19-well: #0e0f18;
  --color-tcb19-well: oklch(0.15 0.02 280);
  --color-tcb19-on: #2a2f45;
  --color-tcb19-on: oklch(0.3 0.04 275);
  --color-tcb19-line: #2f3350;
  --color-tcb19-line: oklch(0.32 0.05 278);
  --color-tcb19-box: #5a6099;
  --color-tcb19-box: oklch(0.5 0.09 278);
  --color-tcb19-ink: #c8ccec;
  --color-tcb19-ink: oklch(0.86 0.04 280);
  --color-tcb19-c: #39ff6a;
  --color-tcb19-c: oklch(0.88 0.24 145);
  --font-tcb19-pixel: 'Press Start 2P', ui-monospace, monospace;
  --shadow-tcb19-panel: 6px 6px 0 #07080e;
  --shadow-tcb19-bevel: inset -2px -2px 0 #07080e;
  --shadow-tcb19-tick: 3px 3px 0 #39ff6a, 6px 6px 0 #39ff6a, 9px 3px 0 #39ff6a, 12px 0 0 #39ff6a, 15px -3px 0 #39ff6a, 18px -6px 0 #39ff6a;
  --animate-tcb19-blink: tcb19-blink 0.8s steps(1) infinite;

  @keyframes tcb19-blink {
    0%,
        100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-19 {
  width: 100%;
  min-height: 100svh;
}
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=Press+Start+2P&display=swap">

What changed in the port

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

  • Six calc(n*var(--p)) shadow offsets became one literal --shadow-tcb19-tick token.
  • transition:… steps(2) became ease-[steps(2)].
  • UI upgrade from the CSS original: a blinking ▶ selection cursor follows hover and keyboard focus, like a real arcade menu, and checked labels light up green.
  • UI upgrade: labels now use Press Start 2P instead of a system monospace, and the box border rose from #4a5080 (2:1) to 3:1.
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: Retro Pixel Art Checkbox in Tailwind CSS — 8-Bit Arcade Menu
Source: https://codefronts.com/components/tailwind-css-checkboxes/retro-pixel-art-checkbox-tailwind/

An arcade menu where every tick is drawn in pixels: one 3px square plus a shadow-tcb19-tick token that stamps six more. Now with the real game-menu touch — a blinking ▶ cursor that appears beside the row you're on (hover or keyboard focus), in Press Start 2P.
## HTML
```html
<section class="tcb-19 w-full min-h-svh grid place-items-center bg-tcb19-bg px-5 py-14 font-tcb19-pixel text-tcb19-ink selection:bg-tcb19-c selection:text-tcb19-bg" aria-label="Retro pixel checkboxes">
  <div class="w-full max-w-[25rem] border-2 border-tcb19-line bg-tcb19-panel p-3 shadow-tcb19-panel">
    <p class="px-2 pb-3 pt-1 text-[10px] tracking-[0.1em] text-tcb19-c">— PLAYER 1 —</p>
    <label class="group flex min-h-13 cursor-pointer items-center gap-3 px-1"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="w-3 text-[10px] text-tcb19-c opacity-0 group-hover:animate-tcb19-blink group-hover:opacity-100 group-has-focus-visible:animate-tcb19-blink group-has-focus-visible:opacity-100 motion-reduce:animate-none">▶</span><span aria-hidden="true" class="relative size-7 flex-none border-2 border-tcb19-box bg-tcb19-well shadow-tcb19-bevel transition-colors duration-100 ease-[steps(2)] peer-checked:border-tcb19-c peer-checked:bg-tcb19-on peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb19-c"><span class="absolute left-[5px] top-[13px] size-[3px] bg-tcb19-c opacity-0 shadow-tcb19-tick transition-opacity duration-100 ease-[steps(2)] group-has-checked:opacity-100"></span></span><span class="text-[11px] leading-5 tracking-[0.06em] group-has-checked:text-tcb19-c">INSERT COIN</span></label>
    <label class="group flex min-h-13 cursor-pointer items-center gap-3 px-1"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="w-3 text-[10px] text-tcb19-c opacity-0 group-hover:animate-tcb19-blink group-hover:opacity-100 group-has-focus-visible:animate-tcb19-blink group-has-focus-visible:opacity-100 motion-reduce:animate-none">▶</span><span aria-hidden="true" class="relative size-7 flex-none border-2 border-tcb19-box bg-tcb19-well shadow-tcb19-bevel transition-colors duration-100 ease-[steps(2)] peer-checked:border-tcb19-c peer-checked:bg-tcb19-on peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb19-c"><span class="absolute left-[5px] top-[13px] size-[3px] bg-tcb19-c opacity-0 shadow-tcb19-tick transition-opacity duration-100 ease-[steps(2)] group-has-checked:opacity-100"></span></span><span class="text-[11px] leading-5 tracking-[0.06em] group-has-checked:text-tcb19-c">CONTINUE?</span></label>
    <label class="group flex min-h-13 cursor-pointer items-center gap-3 px-1"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="w-3 text-[10px] text-tcb19-c opacity-0 group-hover:animate-tcb19-blink group-hover:opacity-100 group-has-focus-visible:animate-tcb19-blink group-has-focus-visible:opacity-100 motion-reduce:animate-none">▶</span><span aria-hidden="true" class="relative size-7 flex-none border-2 border-tcb19-box bg-tcb19-well shadow-tcb19-bevel transition-colors duration-100 ease-[steps(2)] peer-checked:border-tcb19-c peer-checked:bg-tcb19-on peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb19-c"><span class="absolute left-[5px] top-[13px] size-[3px] bg-tcb19-c opacity-0 shadow-tcb19-tick transition-opacity duration-100 ease-[steps(2)] group-has-checked:opacity-100"></span></span><span class="text-[11px] leading-5 tracking-[0.06em] group-has-checked:text-tcb19-c">EXTRA LIFE</span></label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb19-bg: #12131f;
  --color-tcb19-bg: oklch(0.18 0.025 280);
  --color-tcb19-panel: #1b1d2e;
  --color-tcb19-panel: oklch(0.22 0.03 280);
  --color-tcb19-well: #0e0f18;
  --color-tcb19-well: oklch(0.15 0.02 280);
  --color-tcb19-on: #2a2f45;
  --color-tcb19-on: oklch(0.3 0.04 275);
  --color-tcb19-line: #2f3350;
  --color-tcb19-line: oklch(0.32 0.05 278);
  --color-tcb19-box: #5a6099;
  --color-tcb19-box: oklch(0.5 0.09 278);
  --color-tcb19-ink: #c8ccec;
  --color-tcb19-ink: oklch(0.86 0.04 280);
  --color-tcb19-c: #39ff6a;
  --color-tcb19-c: oklch(0.88 0.24 145);
  --font-tcb19-pixel: 'Press Start 2P', ui-monospace, monospace;
  --shadow-tcb19-panel: 6px 6px 0 #07080e;
  --shadow-tcb19-bevel: inset -2px -2px 0 #07080e;
  --shadow-tcb19-tick: 3px 3px 0 #39ff6a, 6px 6px 0 #39ff6a, 9px 3px 0 #39ff6a, 12px 0 0 #39ff6a, 15px -3px 0 #39ff6a, 18px -6px 0 #39ff6a;
  --animate-tcb19-blink: tcb19-blink 0.8s steps(1) infinite;

  @keyframes tcb19-blink {
    0%,
        100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-19 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Pixel art with shadows. A single 3×3 element is the first pixel; each zero-blur box-shadow offset copies it. The original computed each offset with calc(n * var(--p)); as a token the pixel size is baked (3px) and readable.

Steps easing. ease-[steps(2)] makes transitions jump in two frames — the look of low frame-rate hardware.

The cursor is decorative (aria-hidden), blinks with a steps keyframe, and shows for hover and keyboard focus.

Make it yours

  • Palette: Game Boy greens — #0f380f / #9bbc0f.
  • Bigger pixels: multiply every offset in the tick token.
  • Sound: pair with a short <audio> blip in JS (respect user settings).
  • Swap ▶ for ♥ or ★.

Gotchas — read before shipping

  • Press Start 2P is wide — keep labels short and ≥11px.
  • Pixel shadows don't scale with the box; change the token if you resize.
  • Reduced motion stops the blink but keeps the cursor visible.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

steps() easing and box-shadow are universal.

Techniques used in this demo

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →