20 Tailwind Retro UI
12 / 20

All 20 in 20 Tailwind Retro UI

  1. 01Tailwind CRT Scanlines and Screen Curvature
  2. 02Tailwind Pixel Art Scaling with Image Rendering
  3. 03Tailwind Dithering Patterns with Gradients
  4. 04Tailwind One Bit Bevel Borders with Box Shadow
  5. 05Tailwind Classic Mac System 7 Window Chrome
  6. 06Tailwind MS DOS Text Mode Interface Grid
  7. 07Tailwind Teletext and Ceefax Block Graphics
  8. 08Tailwind Amber and Green Phosphor Monitor
  9. 09Tailwind Windows 95 Desktop Interface
  10. 10Tailwind Retro Futuristic Terminal Interface
  11. 11Tailwind Eight Bit Pixel Art Buttons and HUD
  12. 12Tailwind Neo Brutalist Component Board
  13. 13Tailwind Skeuomorphic Cassette Player
  14. 14Tailwind Vaporwave Aesthetic Scene
  15. 15Tailwind Retro Arcade Game Interface
  16. 16Tailwind ASCII Art Terminal Interface
  17. 17Tailwind Nineties Web Guestbook Widget
  18. 18Tailwind Y2K Aqua Gloss Interface Kit
  19. 19Tailwind Vintage Storefront Layout
  20. 20Tailwind Retro Desktop Portfolio Template
Tailwind v4MIT licensed

Tailwind Neo Brutalist Component Board

A single board of components in the hard-edged neo-brutalist style — thick black borders, solid offset shadows, clashing flats, no gradients and no radius. It is deliberately one board rather than a component library, because the point is the lineage: this is what the era's chunky, unapologetic chrome turned into once designers stopped apologising for it. It is also the style utilities were practically designed for.

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="twr-12 relative block w-full min-h-svh box-border bg-twr12-bg text-twr12-k font-twr12-sans" aria-labelledby="twr-12-title">
  <h2 class="absolute size-px overflow-hidden [clip-path:inset(50%)] whitespace-nowrap" id="twr-12-title">Neo brutalist component board</h2>

  <div class="absolute top-4 right-4 z-6">
    <input class="peer absolute inset-0 size-11 m-0 opacity-0 cursor-pointer" type="checkbox" id="twr-12-theme">
    <label class="grid place-items-center size-11 cursor-pointer bg-twr12-a text-twr12-k border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] peer-focus-visible:outline-[3px] peer-focus-visible:outline-twr12-acc peer-focus-visible:outline-offset-[3px]" for="twr-12-theme">
      <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 4a8 8 0 0 0 0 16Z" fill="currentColor"/></svg>
      <span class="absolute size-px overflow-hidden [clip-path:inset(50%)] whitespace-nowrap">Toggle dark ground</span>
    </label>
  </div>

  <div class="grid grid-cols-[minmax(0,1fr)] gap-7 max-w-[66rem] mx-auto px-[clamp(0.9rem,0.6rem+2vw,2rem)] pt-[clamp(3.75rem,3rem+3vw,5rem)] pb-[calc(4rem+var(--twr-12-off))]">
    <header class="min-w-0 grid gap-2">
      <p class="m-0 font-twr12-mono text-[0.7rem] tracking-[0.14em] uppercase">Lineage &middot; thick borders, flat fills, no ornament</p>
      <h3 class="m-0 min-w-0 text-balance uppercase font-black leading-[0.94] tracking-[-0.045em] text-[clamp(2rem,1rem+6vw,4rem)]">One board.<br>Not a kit.</h3>
    </header>

    <div class="grid gap-[calc(1.25rem+var(--twr-12-off))] grid-cols-[repeat(auto-fit,minmax(min(100%,17rem),1fr))]">
      <article class="min-w-0 grid content-start gap-3.5 p-[clamp(1rem,0.7rem+1.4vw,1.5rem)] border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] bg-twr12-a text-twr12-k">
        <h4 class="m-0 text-[0.75rem] font-black tracking-[0.16em] uppercase">Buttons</h4>
        <div class="flex flex-wrap gap-[calc(0.75rem+var(--twr-12-off))]">
          <button class="min-h-11 px-4 py-2.5 border-[length:var(--twr-12-bord)] border-twr12-k font-inherit text-[0.82rem] font-black tracking-[0.1em] cursor-pointer transition-none [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] active:translate-x-[var(--twr-12-off)] active:translate-y-[var(--twr-12-off)] active:shadow-none focus-visible:outline-[3px] focus-visible:outline-twr12-acc focus-visible:outline-offset-[3px] bg-twr12-b text-twr12-w" type="button">PRIMARY</button>
          <button class="min-h-11 px-4 py-2.5 border-[length:var(--twr-12-bord)] border-twr12-k font-inherit text-[0.82rem] font-black tracking-[0.1em] cursor-pointer transition-none [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] active:translate-x-[var(--twr-12-off)] active:translate-y-[var(--twr-12-off)] active:shadow-none focus-visible:outline-[3px] focus-visible:outline-twr12-acc focus-visible:outline-offset-[3px] bg-twr12-c text-twr12-k" type="button">SECOND</button>
          <button class="min-h-11 px-4 py-2.5 border-[length:var(--twr-12-bord)] border-twr12-k font-inherit text-[0.82rem] font-black tracking-[0.1em] cursor-pointer transition-none [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] active:translate-x-[var(--twr-12-off)] active:translate-y-[var(--twr-12-off)] active:shadow-none focus-visible:outline-[3px] focus-visible:outline-twr12-acc focus-visible:outline-offset-[3px] bg-twr12-w text-twr12-k" type="button">GHOST</button>
        </div>
        <p class="m-0 min-w-0 text-[0.8rem] leading-normal text-pretty">Press translates by the shadow offset and drops the shadow. Footprint unchanged.</p>
      </article>

      <article class="min-w-0 grid content-start gap-3.5 p-[clamp(1rem,0.7rem+1.4vw,1.5rem)] border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] bg-twr12-c text-twr12-k">
        <h4 class="m-0 text-[0.75rem] font-black tracking-[0.16em] uppercase">Switch and tags</h4>
        <div class="flex flex-wrap gap-3">
          <span class="relative inline-flex">
            <input class="peer absolute size-px opacity-0 m-0" type="checkbox" id="twr-12-sw" checked>
            <label class="flex items-center gap-2.5 min-h-11 px-3 py-2 cursor-pointer font-black text-[0.78rem] tracking-[0.12em] bg-twr12-w border-[length:var(--twr-12-bord)] border-twr12-k peer-focus-visible:outline-[3px] peer-focus-visible:outline-twr12-acc peer-focus-visible:outline-offset-[3px] peer-checked:[&_[data-knob]]:translate-x-[1.25rem]" for="twr-12-sw">
              <span class="block w-11 h-6 p-0.5 bg-twr12-bg border-[length:var(--twr-12-bord)] border-twr12-k"><span class="block size-4 bg-twr12-k transition-none" data-knob aria-hidden="true"></span></span>NOTIFY
            </label>
          </span>
        </div>
        <ul class="list-none m-0 p-0 flex flex-wrap gap-2 text-[0.7rem] font-black tracking-[0.12em]">
          <li class="px-2 py-1 bg-twr12-k text-twr12-w">FLAT</li>
          <li class="px-2 py-1 bg-twr12-k text-twr12-w">3PX</li>
          <li class="px-2 py-1 bg-twr12-k text-twr12-w">NO RADIUS</li>
          <li class="px-2 py-1 bg-twr12-k text-twr12-w">NO BLUR</li>
        </ul>
      </article>

      <article class="min-w-0 grid content-start gap-3.5 p-[clamp(1rem,0.7rem+1.4vw,1.5rem)] border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] bg-twr12-b text-twr12-w">
        <h4 class="m-0 text-[0.75rem] font-black tracking-[0.16em] uppercase">Stat</h4>
        <p class="m-0 font-black leading-none tracking-[-0.05em] text-[clamp(3rem,2rem+6vw,5.5rem)]">147</p>
        <p class="m-0 min-w-0 text-[0.8rem] leading-normal text-pretty">Offset shadows read as ink misregistration, not elevation.</p>
      </article>

      <article class="min-w-0 grid content-start gap-3.5 p-[clamp(1rem,0.7rem+1.4vw,1.5rem)] border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] bg-twr12-d text-twr12-k">
        <h4 class="m-0 text-[0.75rem] font-black tracking-[0.16em] uppercase">Notice</h4>
        <p class="m-0 min-w-0 text-[0.92rem] leading-normal text-pretty">Every fill carries its own verified text colour. A single ink across five grounds does not pass.</p>
        <p class="m-0 font-twr12-mono text-[0.75rem] tabular-nums">4.9:1 &middot; 8.2:1 &middot; 11.4:1</p>
      </article>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-twr12-k: #0c0c0c;
  --color-twr12-w: #ffffff;
  --color-twr12-a: #ffe500;
  --color-twr12-b: #ff4d2d;
  --color-twr12-c: #00d3c1;
  --color-twr12-d: #b7a6ff;
  --color-twr12-bg: #f4f1e8;
  --color-twr12-bg: oklch(0.95 0.014 92);
  --color-twr12-acc: #1f3bd8;
  --color-twr12-acc: oklch(0.45 0.22 265);
  --font-twr12-sans: 'Archivo', ui-sans-serif, Helvetica, 'Arial Black', Arial, sans-serif;
  --font-twr12-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.twr-12 {
  --twr-12-off: 6px;
  --twr-12-bord: 3px;
}
/* The only rule in the file: a custom-property write from a nested input's
   state, which no variant can perform. Everything else is markup. */

.twr-12:has(#twr-12-theme:checked) {
  --color-twr12-bg: #16150f;
  --color-twr12-bg: oklch(0.19 0.01 92);
}

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-twr12-k: #0c0c0c;
  --color-twr12-w: #ffffff;
  --color-twr12-a: #ffe500;
  --color-twr12-b: #ff4d2d;
  --color-twr12-c: #00d3c1;
  --color-twr12-d: #b7a6ff;
  --color-twr12-bg: #f4f1e8;
  --color-twr12-bg: oklch(0.95 0.014 92);
  --color-twr12-acc: #1f3bd8;
  --color-twr12-acc: oklch(0.45 0.22 265);
  --font-twr12-sans: 'Archivo', ui-sans-serif, Helvetica, 'Arial Black', Arial, sans-serif;
  --font-twr12-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.twr-12 {
  --twr-12-off: 6px;
  --twr-12-bord: 3px;
}
/* The only rule in the file: a custom-property write from a nested input's
   state, which no variant can perform. Everything else is markup. */

.twr-12:has(#twr-12-theme:checked) {
  --color-twr12-bg: #16150f;
  --color-twr12-bg: oklch(0.19 0.01 92);
}
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=Archivo:wght@400;700;900&family=JetBrains+Mono:wght@400;500&display=swap">

What changed in the port

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

  • The webfonts load as <link> tags in setup, not as an @import in the stylesheet — Tailwind emits user @import rules after its own layers, where the browser drops them.
  • This is the collection's thinnest stylesheet: a token block and one :has() rule. The style has no shading, no elevation scale and no state colours, so there is nothing for CSS to abstract.
  • Contrast with demo 04: the same &ldquo;thick edges, no gradients&rdquo; brief needed three @utility declarations there, because a bevel is six coupled values while a brutalist card is four independent ones.
  • transition-none is written explicitly on the buttons. In a codebase where a default transition might be added globally, the absence has to be stated.
  • border-[length:var(--twr-12-bord)] disambiguates a variable border value; border-[var(--x)] can be read as a colour.
  • The switch knob is inside the label, not a sibling of the checkbox, so the variant is peer-checked:[&_[data-knob]]:translate-x-[1.25rem] on the label — the single most common peer mistake is forgetting that bolt-on.
  • Grid gaps are calc(... + var(--twr-12-off)) so raising the shadow offset never lets two shadows collide across a gap.
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 Neo Brutalist Component Board
Source: https://codefronts.com/design-styles/tailwind-retro-ui/tailwind-neo-brutalist-component-board/

A single board of components in the hard-edged neo-brutalist style &mdash; thick black borders, solid offset shadows, clashing flats, no gradients and no radius. It is deliberately one board rather than a component library, because the point is the lineage: this is what the era's chunky, unapologetic chrome turned into once designers stopped apologising for it. It is also the style utilities were practically designed for.
## HTML
```html
<section class="twr-12 relative block w-full min-h-svh box-border bg-twr12-bg text-twr12-k font-twr12-sans" aria-labelledby="twr-12-title">
  <h2 class="absolute size-px overflow-hidden [clip-path:inset(50%)] whitespace-nowrap" id="twr-12-title">Neo brutalist component board</h2>

  <div class="absolute top-4 right-4 z-6">
    <input class="peer absolute inset-0 size-11 m-0 opacity-0 cursor-pointer" type="checkbox" id="twr-12-theme">
    <label class="grid place-items-center size-11 cursor-pointer bg-twr12-a text-twr12-k border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] peer-focus-visible:outline-[3px] peer-focus-visible:outline-twr12-acc peer-focus-visible:outline-offset-[3px]" for="twr-12-theme">
      <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 4a8 8 0 0 0 0 16Z" fill="currentColor"/></svg>
      <span class="absolute size-px overflow-hidden [clip-path:inset(50%)] whitespace-nowrap">Toggle dark ground</span>
    </label>
  </div>

  <div class="grid grid-cols-[minmax(0,1fr)] gap-7 max-w-[66rem] mx-auto px-[clamp(0.9rem,0.6rem+2vw,2rem)] pt-[clamp(3.75rem,3rem+3vw,5rem)] pb-[calc(4rem+var(--twr-12-off))]">
    <header class="min-w-0 grid gap-2">
      <p class="m-0 font-twr12-mono text-[0.7rem] tracking-[0.14em] uppercase">Lineage &middot; thick borders, flat fills, no ornament</p>
      <h3 class="m-0 min-w-0 text-balance uppercase font-black leading-[0.94] tracking-[-0.045em] text-[clamp(2rem,1rem+6vw,4rem)]">One board.<br>Not a kit.</h3>
    </header>

    <div class="grid gap-[calc(1.25rem+var(--twr-12-off))] grid-cols-[repeat(auto-fit,minmax(min(100%,17rem),1fr))]">
      <article class="min-w-0 grid content-start gap-3.5 p-[clamp(1rem,0.7rem+1.4vw,1.5rem)] border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] bg-twr12-a text-twr12-k">
        <h4 class="m-0 text-[0.75rem] font-black tracking-[0.16em] uppercase">Buttons</h4>
        <div class="flex flex-wrap gap-[calc(0.75rem+var(--twr-12-off))]">
          <button class="min-h-11 px-4 py-2.5 border-[length:var(--twr-12-bord)] border-twr12-k font-inherit text-[0.82rem] font-black tracking-[0.1em] cursor-pointer transition-none [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] active:translate-x-[var(--twr-12-off)] active:translate-y-[var(--twr-12-off)] active:shadow-none focus-visible:outline-[3px] focus-visible:outline-twr12-acc focus-visible:outline-offset-[3px] bg-twr12-b text-twr12-w" type="button">PRIMARY</button>
          <button class="min-h-11 px-4 py-2.5 border-[length:var(--twr-12-bord)] border-twr12-k font-inherit text-[0.82rem] font-black tracking-[0.1em] cursor-pointer transition-none [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] active:translate-x-[var(--twr-12-off)] active:translate-y-[var(--twr-12-off)] active:shadow-none focus-visible:outline-[3px] focus-visible:outline-twr12-acc focus-visible:outline-offset-[3px] bg-twr12-c text-twr12-k" type="button">SECOND</button>
          <button class="min-h-11 px-4 py-2.5 border-[length:var(--twr-12-bord)] border-twr12-k font-inherit text-[0.82rem] font-black tracking-[0.1em] cursor-pointer transition-none [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] active:translate-x-[var(--twr-12-off)] active:translate-y-[var(--twr-12-off)] active:shadow-none focus-visible:outline-[3px] focus-visible:outline-twr12-acc focus-visible:outline-offset-[3px] bg-twr12-w text-twr12-k" type="button">GHOST</button>
        </div>
        <p class="m-0 min-w-0 text-[0.8rem] leading-normal text-pretty">Press translates by the shadow offset and drops the shadow. Footprint unchanged.</p>
      </article>

      <article class="min-w-0 grid content-start gap-3.5 p-[clamp(1rem,0.7rem+1.4vw,1.5rem)] border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] bg-twr12-c text-twr12-k">
        <h4 class="m-0 text-[0.75rem] font-black tracking-[0.16em] uppercase">Switch and tags</h4>
        <div class="flex flex-wrap gap-3">
          <span class="relative inline-flex">
            <input class="peer absolute size-px opacity-0 m-0" type="checkbox" id="twr-12-sw" checked>
            <label class="flex items-center gap-2.5 min-h-11 px-3 py-2 cursor-pointer font-black text-[0.78rem] tracking-[0.12em] bg-twr12-w border-[length:var(--twr-12-bord)] border-twr12-k peer-focus-visible:outline-[3px] peer-focus-visible:outline-twr12-acc peer-focus-visible:outline-offset-[3px] peer-checked:[&_[data-knob]]:translate-x-[1.25rem]" for="twr-12-sw">
              <span class="block w-11 h-6 p-0.5 bg-twr12-bg border-[length:var(--twr-12-bord)] border-twr12-k"><span class="block size-4 bg-twr12-k transition-none" data-knob aria-hidden="true"></span></span>NOTIFY
            </label>
          </span>
        </div>
        <ul class="list-none m-0 p-0 flex flex-wrap gap-2 text-[0.7rem] font-black tracking-[0.12em]">
          <li class="px-2 py-1 bg-twr12-k text-twr12-w">FLAT</li>
          <li class="px-2 py-1 bg-twr12-k text-twr12-w">3PX</li>
          <li class="px-2 py-1 bg-twr12-k text-twr12-w">NO RADIUS</li>
          <li class="px-2 py-1 bg-twr12-k text-twr12-w">NO BLUR</li>
        </ul>
      </article>

      <article class="min-w-0 grid content-start gap-3.5 p-[clamp(1rem,0.7rem+1.4vw,1.5rem)] border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] bg-twr12-b text-twr12-w">
        <h4 class="m-0 text-[0.75rem] font-black tracking-[0.16em] uppercase">Stat</h4>
        <p class="m-0 font-black leading-none tracking-[-0.05em] text-[clamp(3rem,2rem+6vw,5.5rem)]">147</p>
        <p class="m-0 min-w-0 text-[0.8rem] leading-normal text-pretty">Offset shadows read as ink misregistration, not elevation.</p>
      </article>

      <article class="min-w-0 grid content-start gap-3.5 p-[clamp(1rem,0.7rem+1.4vw,1.5rem)] border-[length:var(--twr-12-bord)] border-twr12-k [box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)] bg-twr12-d text-twr12-k">
        <h4 class="m-0 text-[0.75rem] font-black tracking-[0.16em] uppercase">Notice</h4>
        <p class="m-0 min-w-0 text-[0.92rem] leading-normal text-pretty">Every fill carries its own verified text colour. A single ink across five grounds does not pass.</p>
        <p class="m-0 font-twr12-mono text-[0.75rem] tabular-nums">4.9:1 &middot; 8.2:1 &middot; 11.4:1</p>
      </article>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-twr12-k: #0c0c0c;
  --color-twr12-w: #ffffff;
  --color-twr12-a: #ffe500;
  --color-twr12-b: #ff4d2d;
  --color-twr12-c: #00d3c1;
  --color-twr12-d: #b7a6ff;
  --color-twr12-bg: #f4f1e8;
  --color-twr12-bg: oklch(0.95 0.014 92);
  --color-twr12-acc: #1f3bd8;
  --color-twr12-acc: oklch(0.45 0.22 265);
  --font-twr12-sans: 'Archivo', ui-sans-serif, Helvetica, 'Arial Black', Arial, sans-serif;
  --font-twr12-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.twr-12 {
  --twr-12-off: 6px;
  --twr-12-bord: 3px;
}
/* The only rule in the file: a custom-property write from a nested input's
   state, which no variant can perform. Everything else is markup. */

.twr-12:has(#twr-12-theme:checked) {
  --color-twr12-bg: #16150f;
  --color-twr12-bg: oklch(0.19 0.01 92);
}
```

How this works

The shadow is a print artefact, not a light source. Zero blur and a hard equal offset does not describe an object floating above a surface — it describes two layers of ink that did not quite line up. The offset is identical across the whole board, because a varying offset implies varying height, which is a different idiom. One variable holds it:

class="[box-shadow:var(--twr-12-off)_var(--twr-12-off)_0_0_var(--color-twr12-k)]"

Press means slam, not depress — and that is three utilities. active:translate-x-[var(--twr-12-off)] active:translate-y-[var(--twr-12-off)] active:shadow-none. The element moves exactly into its shadow's space, so nothing reflows, and transition-none keeps it instant. Anything longer than about 60ms undermines the gesture; a default transition would ruin it, which is why the absence is written down rather than assumed.

This is the style utilities fit best, and it is worth saying why. Neo-brutalism has no shading, no elevation scale and no state colours — a component is a fill, a border, a shadow and a translation. There is nothing for a stylesheet to abstract, so the entire board is markup with no CSS beyond the token block and one :has() surround flip. Compare demo 04, where the same “no gradients, thick edges” brief needed three @utility declarations: the difference is that a bevel is six coupled values and a brutalist card is four independent ones.

Clashing is a discipline, not an absence of one. The colours fight on purpose, but every pair is checked and stated in the markup: yellow ground takes text-twr12-k, the red block takes text-twr12-w, cyan takes black. Choosing clashing flats and not measuring them is the failure mode — a board that looks confident with three unreadable panels in it.

Scope is deliberate. One board, not a kit. What earns the style a place in a period-reproduction collection is the lineage — thick borders, flat fills, visible structure, no ornament are exactly the constraints early bitmap interfaces worked under, arrived at again on purpose rather than by necessity.

Make it yours

  • Change --twr-12-off on the section to retune every shadow and every press translation at once — they read the same value.
  • Swap the four flat @theme colours for a different clash, and re-check each fill against the text utility beside it.
  • Set --twr-12-bord to 5px for a heavier board or 2px for something closer to a wireframe.
  • Add a second shadow layer in a contrasting colour inside the arbitrary value for a two-plate misregistration effect.
  • Drop the two active:translate-* utilities and keep active:shadow-none for a flatter, more clinical interaction.
  • Rotate one card with -rotate-1 for the pasted-on look the style often uses — one element only, or it becomes noise.

Gotchas — read before shipping

  • Clashing flats fail contrast quietly. Every fill needs its own text utility; a single ink across five grounds will not pass.
  • Do not let a default transition near the press. transition-none is load-bearing — the gesture is impact, and impact has no curve.
  • The press must translate, not adjust margin or padding, or the whole board jumps on every click.
  • Equal-offset hard shadows on a dense grid collide where two shadows meet a gap. Keep the grid gap larger than the offset.
  • border-[length:...] is needed when the value is a variable; a bare border-[var(--x)] is ambiguous between width and colour and Tailwind may guess wrong.
  • The style reads loud and slightly aggressive — right for a portfolio or a launch page, wrong for a settings screen or anything handling money.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

box-shadow, transform and flat colour are Baseline since 2011, and text-wrap: balance degrades to normal wrapping below Chrome 114 / Safari 17.5 / Firefox 121. The only real floor is Tailwind v4's generated sheet: Chrome 111+, Safari 16.4+, Firefox 128+. This is one of the most portable designs in the collection.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →