~/css/tailwind-retro-ui

6 Tailwind Retro UI

6 TailwindPublished 2026-10-05Free · no sign-up

Six nostalgic components in Tailwind: a bevelled desktop window, a green-screen terminal with scanlines, an 8-bit pixel card, an arcade high score board, a glossy Y2K button and a 90s homepage guestbook.

Filter demos

01. Tailwind Retro Desktop Window

TailwindRetroWindow

A 90s desktop window with a gradient title bar and bevelled edges made from four border colours: white on the top and left, dark grey on the bottom and right. The buttons use the same bevel, inverted when pressed.

View code

<div class="w-full max-w-xs border-2 border-b-neutral-800 border-l-white border-r-neutral-800 border-t-white bg-[#c0c0c0] p-0.5 font-['Tahoma','Verdana',sans-serif] text-sm text-black">
  <div class="flex items-center justify-between bg-gradient-to-r from-[#000080] to-[#1084d0] px-2 py-1 font-bold text-white"><span>Notepad</span><button type="button" aria-label="Close window" class="grid size-5 place-items-center border-2 border-b-neutral-800 border-l-white border-r-neutral-800 border-t-white bg-[#c0c0c0] text-xs font-bold leading-none text-black active:border-b-white active:border-l-neutral-800 active:border-r-white active:border-t-neutral-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-dotted focus-visible:outline-black">✕</button></div>
  <p class="m-2 border-2 border-b-white border-l-neutral-800 border-r-white border-t-neutral-800 bg-white p-2">Remember to back up your files to floppy.</p>
  <div class="flex justify-end gap-2 p-2"><button type="button" class="min-w-[72px] border-2 border-b-neutral-800 border-l-white border-r-neutral-800 border-t-white bg-[#c0c0c0] px-3 py-1 active:border-b-white active:border-l-neutral-800 active:border-r-white active:border-t-neutral-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-5px] focus-visible:outline-dotted focus-visible:outline-black">OK</button><button type="button" class="min-w-[72px] border-2 border-b-neutral-800 border-l-white border-r-neutral-800 border-t-white bg-[#c0c0c0] px-3 py-1 active:border-b-white active:border-l-neutral-800 active:border-r-white active:border-t-neutral-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-5px] focus-visible:outline-dotted focus-visible:outline-black">Cancel</button></div>
</div>

02. Tailwind Green Phosphor Terminal

TailwindRetroTerminal

An old green-screen terminal with scanlines from a repeating linear gradient, a glow from text-shadow and a blinking block cursor. The cursor blink stops for reduced motion, and the text is real, selectable text.

View code

<pre class="w-full max-w-xs overflow-hidden rounded-xl bg-[#031a0b] bg-[repeating-linear-gradient(transparent_0_2px,rgba(0,0,0,.25)_2px_3px)] p-4 font-mono text-sm leading-6 text-[#4ade80] [text-shadow:0_0_6px_rgba(74,222,128,.7)]">READY.
LOAD "GAME",8
SEARCHING FOR GAME
LOADING
RUN<span aria-hidden="true" class="ml-1 inline-block h-4 w-2.5 translate-y-0.5 animate-[twrt-blink_1s_steps(1)_infinite] bg-[#4ade80] motion-reduce:animate-none"></span></pre>

@keyframes twrt-blink { 50% { opacity: 0; } }

03. Tailwind Pixel Art Card

TailwindRetroPixel

An 8-bit style card with stepped corners from a clip-path polygon, hard shadows with no blur and a monospace font. The heart meter is a list of hearts with the count written for screen readers.

View code

<article class="w-60 max-w-full bg-[#fef08a] p-5 font-mono text-[#1c1917] shadow-[6px_6px_0_#1c1917] [clip-path:polygon(0_8px,8px_8px,8px_0,calc(100%-8px)_0,calc(100%-8px)_8px,100%_8px,100%_calc(100%-8px),calc(100%-8px)_calc(100%-8px),calc(100%-8px)_100%,8px_100%,8px_calc(100%-8px),0_calc(100%-8px))]">
  <p class="text-xs font-bold uppercase">Player 1</p>
  <h3 class="mt-1 text-xl font-black uppercase">Pixel Knight</h3>
  <p class="mt-2 text-sm"><span class="sr-only">Health: 3 of 5</span><span aria-hidden="true" class="tracking-[0.2em] text-red-600">♥♥♥<span class="text-[#a8a29e]">♥♥</span></span></p>
  <button type="button" class="mt-3 border-2 border-[#1c1917] bg-[#22c55e] px-3 py-1 text-sm font-bold uppercase shadow-[3px_3px_0_#1c1917] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1c1917]">Start</button>
</article>

04. Tailwind Arcade High Score Board

TailwindRetroArcade

A high score table in neon on black with a flashing Insert Coin prompt. It is a real ordered list of names and scores, the glow comes from text-shadow, and the flashing stops for reduced motion.

View code

<section class="w-full max-w-xs rounded-xl bg-black p-5 text-center font-mono uppercase">
  <h3 class="text-lg font-black text-[#f472b6] [text-shadow:0_0_8px_#f472b6]">High scores</h3>
  <ol class="mt-3 grid gap-1 text-sm text-[#67e8f9] [text-shadow:0_0_6px_rgba(103,232,249,.7)]">
    <li class="flex justify-between"><span>1. ACE</span><span>98,450</span></li>
    <li class="flex justify-between"><span>2. ZED</span><span>87,200</span></li>
    <li class="flex justify-between"><span>3. KAT</span><span>76,915</span></li>
  </ol>
  <p class="mt-4 animate-[twrt-flash_1.2s_steps(1)_infinite] text-xs text-[#fde047] motion-reduce:animate-none">Insert coin</p>
</section>

@keyframes twrt-flash { 50% { opacity: 0; } }

05. Tailwind Y2K Chrome Button

TailwindRetroY2K

A glossy turn-of-the-millennium button: a chrome gradient, a white highlight over the top half from a before: pseudo-element and a deep blue rim. Text stays dark navy on the light chrome for contrast.

View code

<button type="button" class="relative overflow-hidden rounded-full border-2 border-[#1e3a8a] bg-gradient-to-b from-[#e0f2fe] via-[#93c5fd] to-[#3b82f6] px-8 py-3 font-['Trebuchet_MS','Verdana',sans-serif] text-base font-bold text-[#0b1f4d] shadow-[0_4px_10px_rgba(30,58,138,.4)] before:absolute before:inset-x-2 before:top-1 before:h-1/2 before:rounded-full before:bg-gradient-to-b before:from-white/90 before:to-white/10 hover:brightness-105 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#1e3a8a]"><span class="relative">Download now</span></button>

06. Tailwind 90s Guestbook Form

TailwindRetroForm

A playful homepage guestbook with a tiled background, an inset text area and a bevelled Sign button, all with proper labels. Comic-style fonts are used only for decoration; the form stays easy to read.

View code

<form class="w-full max-w-xs border-4 border-double border-[#7c3aed] bg-[#fef9c3] bg-[radial-gradient(#fde047_1px,transparent_1.5px)] bg-[length:12px_12px] p-4 font-['Comic_Sans_MS','Chalkboard_SE',cursive]">
  <h3 class="text-center text-xl font-bold text-[#7c3aed]">✨ Sign my guestbook ✨</h3>
  <label class="mt-3 block text-sm font-bold text-[#1c1917]">Your name<input type="text" class="mt-1 block w-full border-2 border-b-white border-l-neutral-700 border-r-white border-t-neutral-700 bg-white px-2 py-1 font-sans text-sm text-black focus:outline focus:outline-2 focus:outline-[#7c3aed]"></label>
  <label class="mt-2 block text-sm font-bold text-[#1c1917]">Message<textarea rows="3" class="mt-1 block w-full resize-none border-2 border-b-white border-l-neutral-700 border-r-white border-t-neutral-700 bg-white px-2 py-1 font-sans text-sm text-black focus:outline focus:outline-2 focus:outline-[#7c3aed]"></textarea></label>
  <button type="button" class="mt-3 border-2 border-b-neutral-800 border-l-white border-r-neutral-800 border-t-white bg-[#c0c0c0] px-4 py-1 text-sm font-bold text-black active:border-b-white active:border-l-neutral-800 active:border-r-white active:border-t-neutral-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-dotted focus-visible:outline-black">Sign</button>
</form>

About these Tailwind Retro UI

Bevels from four borders

Set each side separately, such as border-t-white border-l-white border-b-neutral-800 border-r-neutral-800, then swap them on active: for a pressed look.

Scanlines and glow

A repeating linear gradient draws scanlines, and [text-shadow:0_0_6px_…] makes text glow like a CRT.

Stepped corners

A clip-path polygon with 8px steps gives pixel-art corners without images.

Blinking with restraint

Blinking text uses steps(1) keyframes and stops with motion-reduce:animate-none.

Frequently asked questions

Are the retro fonts required?

No. System fallbacks such as Tahoma, Verdana and monospace are listed so it works everywhere.

Is blinking text accessible?

Keep it short, slower than three flashes a second and stoppable; these demos stop for reduced motion.

Is there a CSS version?

Yes, see the CSS retro UI collection.