13 Tailwind CSS Tables
08 / 13

All 13 in 13 Tailwind CSS Tables

  1. 01Responsive Tailwind Table That Stacks into Cards on Mobile
  2. 02Tailwind CSS Pricing Comparison Table with Billing Toggle
  3. 03Tailwind Admin Dashboard Data Table with Sticky Header, Filter & Sort
  4. 04Dark Neon Crypto Price Table in Tailwind CSS
  5. 05Tailwind Shopping Cart Table with Quantity Stepper & Live Totals
  6. 06Glassmorphism Striped Table in Tailwind CSS
  7. 07Tailwind Table with Sticky First Column & Horizontal Scroll
  8. 08Minimal Editorial Table Design in Tailwind CSS
  9. 09Tailwind Checkbox Table with :has() Row States & Progress Bar
  10. 10Tailwind Weekly Class Schedule Timetable
  11. 11Nutrition Facts Label in Tailwind CSS
  12. 12Neumorphic Table Design in Tailwind CSS
  13. 13Tailwind Table with Frosted Glass Sticky Header
Pure TailwindMIT licensed

Minimal Editorial Table Design in Tailwind CSS

A magazine-style review index set in Newsreader's optical-size serif: borderless rows, a heavy masthead rule, two hairlines framing the header and a terracotta arrow that slides in on hover. Ratings became a score plus a hairline meter instead of ★ glyphs a screen reader spells out, and titles are real links with an animated underline.

Live Demo
Plain CSSTailwind v4
Try it

Mosaic by Cruip: a complete Tailwind admin dashboard template in HTML, React, Next.js and Vue · $69

Cruip · Mosaic by Cruip · Affiliate link

View Mosaic dashboard

The code

<section class="ttb-08 grid-cols-1 w-full min-h-svh grid place-items-center bg-ttb08-bg px-8 py-16 font-ttb08-sans text-ttb08-ink" aria-label="Minimal editorial table demo">
  <div class="w-full max-w-3xl">
    <header class="flex items-start justify-between gap-6 border-b-[3px] border-ttb08-ink pb-3">
      <p class="font-ttb08-serif text-[clamp(26px,4vw,34px)] leading-none font-bold tracking-[-0.03em]">The Marginalia Review</p>
      <p class="text-right text-[11px] leading-relaxed tracking-[0.14em] text-ttb08-mut uppercase">Issue No. 48<br>Summer 2025</p>
    </header>
    <p class="mt-2 text-[11px] tracking-[0.24em] text-ttb08-mut uppercase">Literature · Art · Culture · Ideas</p>
    <h2 class="mt-10 font-ttb08-serif text-2xl italic">Notable works of the season</h2>
    <p class="mt-2 max-w-xl text-sm leading-relaxed text-ttb08-mut text-pretty">An editorial index of the quarter's most significant titles, curated by our panel of contributing critics and independent reviewers.</p>
    <table class="mt-8 w-full border-collapse text-left">
      <caption class="sr-only">Notable works of the season with genre, length, publication month and panel score</caption>
      <thead class="border-y border-ttb08-ink [&_th]:py-2.5 [&_th]:text-[10.5px] [&_th]:font-semibold [&_th]:tracking-[0.18em] [&_th]:text-ttb08-mut [&_th]:uppercase [&_th:not(:first-child)]:pl-5">
        <tr><th scope="col">Title &amp; author</th><th scope="col">Genre</th><th scope="col" class="text-right max-sm:hidden">Pages</th><th scope="col" class="max-sm:hidden">Published</th><th scope="col" class="text-right">Score</th></tr>
      </thead>
      <tbody class="[&_td]:py-4 [&_td]:align-top [&_td:not(:first-child)]:pl-5 [&_tr]:border-b [&_tr]:border-ttb08-line [&_tr:last-child]:border-ttb08-ink">
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">The Architecture of Forgetting</a><div class="mt-0.5 text-xs text-ttb08-mut">Miriam Osei-Bonsu</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Literary fiction</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">384</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">Mar 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">9.2</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="9.2 out of 10"><div class="h-full w-[92%] bg-ttb08-acc"></div></div></td>
        </tr>
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">Meridian</a><div class="mt-0.5 text-xs text-ttb08-mut">Takeshi Murakami-White</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Essays</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">228</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">Jan 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">8.7</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="8.7 out of 10"><div class="h-full w-[87%] bg-ttb08-acc"></div></div></td>
        </tr>
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">Salt Coast Elegy</a><div class="mt-0.5 text-xs text-ttb08-mut">Priya Venkatesh</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Poetry</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">112</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">Feb 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">9.5</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="9.5 out of 10"><div class="h-full w-[95%] bg-ttb08-acc"></div></div></td>
        </tr>
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">Cartographies of the Unseen</a><div class="mt-0.5 text-xs text-ttb08-mut">Elara J. Hoffmann</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Non-fiction</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">471</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">Apr 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">8.1</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="8.1 out of 10"><div class="h-full w-[81%] bg-ttb08-acc"></div></div></td>
        </tr>
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">A Brief History of Thresholds</a><div class="mt-0.5 text-xs text-ttb08-mut">Tobias Lund</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Autofiction</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">296</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">May 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">7.9</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="7.9 out of 10"><div class="h-full w-[79%] bg-ttb08-acc"></div></div></td>
        </tr>
      </tbody>
    </table>
    <footer class="mt-4 flex flex-wrap justify-between gap-2 text-[11px] tracking-[0.12em] text-ttb08-mut uppercase">
      <span>Scores out of 10 · panel consensus</span><span>© The Marginalia Review</span>
    </footer>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ttb08-bg: #fbf7f1;
  --color-ttb08-bg: oklch(0.975 0.01 80);
  --color-ttb08-ink: #1a1714;
  --color-ttb08-ink: oklch(0.2 0.01 60);
  --color-ttb08-mut: #6b645c;
  --color-ttb08-mut: oklch(0.5 0.015 65);
  --color-ttb08-line: #e6ddd2;
  --color-ttb08-line: oklch(0.9 0.016 75);
  --color-ttb08-acc: #b5472a;
  --color-ttb08-acc: oklch(0.53 0.15 37);
  --font-ttb08-serif: 'Newsreader', Georgia, serif;
  --font-ttb08-sans: 'Instrument Sans', system-ui, sans-serif;
}
/* 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. */

.ttb-08 {
  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-ttb08-bg: #fbf7f1;
  --color-ttb08-bg: oklch(0.975 0.01 80);
  --color-ttb08-ink: #1a1714;
  --color-ttb08-ink: oklch(0.2 0.01 60);
  --color-ttb08-mut: #6b645c;
  --color-ttb08-mut: oklch(0.5 0.015 65);
  --color-ttb08-line: #e6ddd2;
  --color-ttb08-line: oklch(0.9 0.016 75);
  --color-ttb08-acc: #b5472a;
  --color-ttb08-acc: oklch(0.53 0.15 37);
  --font-ttb08-serif: 'Newsreader', Georgia, serif;
  --font-ttb08-sans: 'Instrument Sans', system-ui, sans-serif;
}
/* 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. */

.ttb-08 {
  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=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Instrument+Sans:wght@400..700&display=swap">

What changed in the port

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

  • The @import of Playfair moved to a <link> in setup — Tailwind emits user @imports after its layers, where the browser drops them.
  • tr:hover td:first-child::before + @keyframes ct-08-arrowin became a persistent arrow span driven by group-hover/row: transitions — it now animates out too, and appears for keyboard focus via group-focus-within/row:.
  • UI upgrade from the CSS original: ★★★★½ glyph strings (read aloud as "black star black star…") became a score plus a hairline meter with role="img" and an aria-label; titles are links with a reveal-on-hover underline.
  • UI upgrade: Playfair swapped for Newsreader's optical-size italic, muted copy raised from #8a8a8a (3.3:1) to 5.5:1, and Pages / Published hide on phones so the index never horizontal-scrolls.
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: Minimal Editorial Table Design in Tailwind CSS
Source: https://codefronts.com/snippets/tailwind-css-tables/minimal-editorial-table-design-tailwind-css/

A magazine-style review index set in Newsreader's optical-size serif: borderless rows, a heavy masthead rule, two hairlines framing the header and a terracotta arrow that slides in on hover. Ratings became a score plus a hairline meter instead of ★ glyphs a screen reader spells out, and titles are real links with an animated underline.
## HTML
```html
<section class="ttb-08 grid-cols-1 w-full min-h-svh grid place-items-center bg-ttb08-bg px-8 py-16 font-ttb08-sans text-ttb08-ink" aria-label="Minimal editorial table demo">
  <div class="w-full max-w-3xl">
    <header class="flex items-start justify-between gap-6 border-b-[3px] border-ttb08-ink pb-3">
      <p class="font-ttb08-serif text-[clamp(26px,4vw,34px)] leading-none font-bold tracking-[-0.03em]">The Marginalia Review</p>
      <p class="text-right text-[11px] leading-relaxed tracking-[0.14em] text-ttb08-mut uppercase">Issue No. 48<br>Summer 2025</p>
    </header>
    <p class="mt-2 text-[11px] tracking-[0.24em] text-ttb08-mut uppercase">Literature · Art · Culture · Ideas</p>
    <h2 class="mt-10 font-ttb08-serif text-2xl italic">Notable works of the season</h2>
    <p class="mt-2 max-w-xl text-sm leading-relaxed text-ttb08-mut text-pretty">An editorial index of the quarter's most significant titles, curated by our panel of contributing critics and independent reviewers.</p>
    <table class="mt-8 w-full border-collapse text-left">
      <caption class="sr-only">Notable works of the season with genre, length, publication month and panel score</caption>
      <thead class="border-y border-ttb08-ink [&_th]:py-2.5 [&_th]:text-[10.5px] [&_th]:font-semibold [&_th]:tracking-[0.18em] [&_th]:text-ttb08-mut [&_th]:uppercase [&_th:not(:first-child)]:pl-5">
        <tr><th scope="col">Title &amp; author</th><th scope="col">Genre</th><th scope="col" class="text-right max-sm:hidden">Pages</th><th scope="col" class="max-sm:hidden">Published</th><th scope="col" class="text-right">Score</th></tr>
      </thead>
      <tbody class="[&_td]:py-4 [&_td]:align-top [&_td:not(:first-child)]:pl-5 [&_tr]:border-b [&_tr]:border-ttb08-line [&_tr:last-child]:border-ttb08-ink">
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">The Architecture of Forgetting</a><div class="mt-0.5 text-xs text-ttb08-mut">Miriam Osei-Bonsu</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Literary fiction</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">384</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">Mar 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">9.2</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="9.2 out of 10"><div class="h-full w-[92%] bg-ttb08-acc"></div></div></td>
        </tr>
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">Meridian</a><div class="mt-0.5 text-xs text-ttb08-mut">Takeshi Murakami-White</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Essays</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">228</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">Jan 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">8.7</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="8.7 out of 10"><div class="h-full w-[87%] bg-ttb08-acc"></div></div></td>
        </tr>
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">Salt Coast Elegy</a><div class="mt-0.5 text-xs text-ttb08-mut">Priya Venkatesh</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Poetry</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">112</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">Feb 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">9.5</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="9.5 out of 10"><div class="h-full w-[95%] bg-ttb08-acc"></div></div></td>
        </tr>
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">Cartographies of the Unseen</a><div class="mt-0.5 text-xs text-ttb08-mut">Elara J. Hoffmann</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Non-fiction</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">471</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">Apr 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">8.1</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="8.1 out of 10"><div class="h-full w-[81%] bg-ttb08-acc"></div></div></td>
        </tr>
        <tr class="group/row">
          <td class="relative"><span aria-hidden="true" class="absolute top-4 -left-6 font-bold text-ttb08-acc opacity-0 -translate-x-1.5 transition duration-200 group-focus-within/row:translate-x-0 group-focus-within/row:opacity-100 group-hover/row:translate-x-0 group-hover/row:opacity-100 motion-reduce:transition-none">→</span><a href="#" class="font-ttb08-serif text-[17px] italic underline decoration-transparent decoration-1 underline-offset-4 transition-colors hover:decoration-ttb08-acc focus-visible:decoration-ttb08-acc focus-visible:outline-none">A Brief History of Thresholds</a><div class="mt-0.5 text-xs text-ttb08-mut">Tobias Lund</div></td>
          <td class="text-[11px] font-semibold tracking-[0.1em] text-ttb08-mut uppercase">Autofiction</td>
          <td class="text-right text-sm tabular-nums max-sm:hidden">296</td>
          <td class="text-sm text-ttb08-mut max-sm:hidden">May 2025</td>
          <td class="text-right"><div class="font-ttb08-serif text-xl font-bold tabular-nums">7.9</div><div class="mt-1 ml-auto h-0.5 w-14 bg-ttb08-line" role="img" aria-label="7.9 out of 10"><div class="h-full w-[79%] bg-ttb08-acc"></div></div></td>
        </tr>
      </tbody>
    </table>
    <footer class="mt-4 flex flex-wrap justify-between gap-2 text-[11px] tracking-[0.12em] text-ttb08-mut uppercase">
      <span>Scores out of 10 · panel consensus</span><span>© The Marginalia Review</span>
    </footer>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttb08-bg: #fbf7f1;
  --color-ttb08-bg: oklch(0.975 0.01 80);
  --color-ttb08-ink: #1a1714;
  --color-ttb08-ink: oklch(0.2 0.01 60);
  --color-ttb08-mut: #6b645c;
  --color-ttb08-mut: oklch(0.5 0.015 65);
  --color-ttb08-line: #e6ddd2;
  --color-ttb08-line: oklch(0.9 0.016 75);
  --color-ttb08-acc: #b5472a;
  --color-ttb08-acc: oklch(0.53 0.15 37);
  --font-ttb08-serif: 'Newsreader', Georgia, serif;
  --font-ttb08-sans: 'Instrument Sans', system-ui, sans-serif;
}
/* 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. */

.ttb-08 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Editorial is mostly subtraction. Cells have no borders; rows carry a single border-b border-ttb08-line, the last row a full-ink rule, and the header is framed by border-y border-ttb08-ink. Hierarchy comes from type: Newsreader italic for titles, tracked small caps for genre, tabular figures for numbers.

<tr class="group/row">
  <td class="relative"><span aria-hidden="true" class="absolute -left-6 opacity-0
    -translate-x-1.5 transition group-hover/row:opacity-100 group-hover/row:translate-x-0">→</span>

The arrow is a transition now. The original re-created the ::before on every hover so its keyframe replayed; a persistent span with a transition animates both in and out, and also responds to group-focus-within/row: when the title link has focus.

Make it yours

  • Swap the serif: change --font-ttb08-serif to 'Instrument Serif' or 'Cormorant Garamond' and update the font link.
  • Luxury spacing: [&_td]:py-6 on tbody.
  • Remove the arrow for static contexts: delete the arrow span — nothing else depends on it.
  • Accent: --color-ttb08-acc drives the arrow, meters and link underline.

Gotchas — read before shipping

  • The arrow hangs in the left gutter (-left-6) — keep at least px-8 on the container or it clips at small widths.
  • Web fonts can cause a layout shift; the setup link uses display=swap and a Georgia fallback with similar metrics.
  • Pure borderless rows depend on the warm paper tone; on pure white raise --color-ttb08-line one step darker.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Only transforms, opacity and borders — the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →