15 Tailwind Card Grid Layouts
05 / 15

All 15 in 15 Tailwind Card Grid Layouts

  1. 01Tailwind Stats Dashboard KPI Grid
  2. 02Tailwind Hero Photo Collage Grid
  3. 03Tailwind Pricing Comparison Card Grid
  4. 04Tailwind Testimonial Wall Grid
  5. 05Tailwind Editorial Tabloid Bento Layout
  6. 06Tailwind Featured Article Magazine Grid
  7. 07Tailwind Asymmetric Bento Box Feature Grid
  8. 08Tailwind Stratified Bento Grid Layout
  9. 09Tailwind Equal-Height Product Grid
  10. 10Tailwind Fluid Masonry Card Grid
  11. 11Tailwind Auto-Fit Blog Archive Grid
  12. 12Tailwind Team Directory Face Grid
  13. 13Tailwind 3D Hover Flip Card Grid
  14. 14Tailwind Use-Case Showcase Card Grid
  15. 15Tailwind Glass Bento Grid Layout
Pure TailwindMIT licensed

Tailwind Editorial Tabloid Bento Layout

A newsprint bento with a real masthead, a display-poster headline, an in-this-issue index with dashed leaders, a pull-quote ribbon and three section tiles — all inside one hairline-ruled 12-column grid. The port keeps every print convention and moves all twelve placement rules onto the tiles: col-span-full, col-span-8, col-span-4.

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="tcg-08 w-full min-h-svh flex items-center justify-center bg-tcg08-paper bg-[repeating-linear-gradient(0deg,oklch(0.2_0.03_50/0.025)_0_1px,transparent_1px_3px)] font-tcg08-sans text-tcg08-ink p-[clamp(20px,3vw,48px)]" aria-label="Editorial tabloid bento layout demo">
  <div class="w-full max-w-[1100px] grid grid-cols-12 gap-0 rounded overflow-hidden border-2 border-tcg08-ink bg-tcg08-paper">

    <div class="col-span-full flex flex-wrap items-center justify-between gap-3.5 border-b-2 border-tcg08-ink bg-tcg08-ink text-tcg08-paper px-[clamp(18px,2.2vw,28px)] py-[clamp(12px,1.4vw,18px)] max-[720px]:flex-col max-[720px]:items-start max-[720px]:gap-2">
      <span class="font-tcg08-serif italic font-black text-[clamp(1.1rem,1.8vw,1.6rem)] tracking-[0.01em] leading-none">THE BRUTALIST</span>
      <span class="flex flex-wrap items-center gap-[clamp(6px,1vw,12px)] text-[clamp(.62rem,.85vw,.74rem)] font-bold tracking-[0.18em] uppercase tabular-nums">
        <span>VOL. 07</span><span class="text-[.6em] opacity-55">&#9679;</span>
        <span>SUMMER 2026</span><span class="text-[.6em] opacity-55">&#9679;</span>
        <span>ISSUE 04</span><span class="text-[.6em] opacity-55">&#9679;</span>
        <span>$12</span>
      </span>
    </div>

    <div class="col-span-8 max-[900px]:col-span-7 max-[720px]:col-span-full flex flex-col justify-center gap-3.5 border-r border-b border-tcg08-ink max-[720px]:border-r-0 px-[clamp(28px,3vw,40px)] py-[clamp(28px,3.4vw,48px)]">
      <span class="text-[clamp(.66rem,.95vw,.78rem)] font-bold tracking-[0.22em] uppercase text-tcg08-accent">The cover story</span>
      <h2 class="font-tcg08-serif font-black text-[clamp(2.4rem,6.6vw,6rem)] leading-[0.88] tracking-[-0.035em]">Brutalist<br><span class="italic text-tcg08-accent">Web</span></h2>
      <span class="font-tcg08-serif italic max-w-[38ch] text-[clamp(.82rem,1.05vw,.96rem)] leading-[1.5] text-tcg08-ink70">Field notes from designers building louder, slower, and on purpose.</span>
    </div>

    <div class="col-span-4 max-[900px]:col-span-5 max-[720px]:col-span-full max-[720px]:border-t flex flex-col gap-3 border-b border-tcg08-ink bg-tcg08-tint px-[clamp(22px,2.4vw,28px)] py-[clamp(22px,2.4vw,32px)]">
      <div class="flex items-baseline justify-between pb-2.5 border-b-2 border-tcg08-ink">
        <span class="font-tcg08-serif italic font-black text-[clamp(.95rem,1.3vw,1.15rem)]">In this issue</span>
        <span class="text-[.62rem] font-bold tracking-[0.18em] uppercase opacity-65">04 / pieces</span>
      </div>
      <ol class="flex flex-col list-none">
        <li class="flex items-baseline gap-2 py-2.5 border-b border-dashed border-tcg08-dash last:border-b-0 last:pb-0">
          <span class="font-tcg08-serif font-black text-[.88rem] min-w-[1.6em] text-tcg08-accent">01</span>
          <span class="flex-1 text-[clamp(.74rem,.92vw,.86rem)] font-medium leading-[1.3]">The Brutalist Web</span>
          <span class="text-[.72rem] font-bold tabular-nums tracking-[0.04em] text-tcg08-ink60">p.12</span>
        </li>
        <li class="flex items-baseline gap-2 py-2.5 border-b border-dashed border-tcg08-dash last:border-b-0 last:pb-0">
          <span class="font-tcg08-serif font-black text-[.88rem] min-w-[1.6em] text-tcg08-accent">02</span>
          <span class="flex-1 text-[clamp(.74rem,.92vw,.86rem)] font-medium leading-[1.3]">Whitespace as protest</span>
          <span class="text-[.72rem] font-bold tabular-nums tracking-[0.04em] text-tcg08-ink60">p.24</span>
        </li>
        <li class="flex items-baseline gap-2 py-2.5 border-b border-dashed border-tcg08-dash last:border-b-0 last:pb-0">
          <span class="font-tcg08-serif font-black text-[.88rem] min-w-[1.6em] text-tcg08-accent">03</span>
          <span class="flex-1 text-[clamp(.74rem,.92vw,.86rem)] font-medium leading-[1.3]">Field notes from the type foundry</span>
          <span class="text-[.72rem] font-bold tabular-nums tracking-[0.04em] text-tcg08-ink60">p.38</span>
        </li>
        <li class="flex items-baseline gap-2 py-2.5 border-b border-dashed border-tcg08-dash last:border-b-0 last:pb-0">
          <span class="font-tcg08-serif font-black text-[.88rem] min-w-[1.6em] text-tcg08-accent">04</span>
          <span class="flex-1 text-[clamp(.74rem,.92vw,.86rem)] font-medium leading-[1.3]">Interview with Massimo Vignelli</span>
          <span class="text-[.72rem] font-bold tabular-nums tracking-[0.04em] text-tcg08-ink60">p.52</span>
        </li>
      </ol>
    </div>

    <figure class="col-span-full relative flex flex-col gap-2 border-b border-tcg08-ink bg-tcg08-paper px-[clamp(28px,3.4vw,56px)] py-[clamp(24px,3vw,40px)]">
      <span class="absolute -top-2.5 left-[clamp(12px,1.6vw,24px)] pointer-events-none font-tcg08-serif font-black leading-none opacity-15 text-tcg08-accent text-[clamp(5rem,12vw,10rem)]" aria-hidden="true">&ldquo;</span>
      <blockquote class="relative z-1 max-w-[32ch] font-tcg08-serif font-semibold text-[clamp(1.15rem,2.2vw,1.7rem)] leading-[1.32] tracking-[-0.005em]">Whitespace is a design choice. <em class="italic text-tcg08-accent">Not a bug.</em></blockquote>
      <figcaption class="text-[.7rem] font-bold tracking-[0.18em] uppercase text-tcg08-ink60">&mdash; Editorial, p. 24</figcaption>
    </figure>

    <div class="col-span-full grid grid-cols-3 max-[720px]:grid-cols-2 max-[480px]:grid-cols-1 gap-0">
      <article class="flex flex-col gap-2.5 border-r border-tcg08-ink max-[720px]:border-b max-[480px]:border-r-0 p-[clamp(20px,2.4vw,28px)] min-h-[clamp(180px,18vw,220px)]">
        <span class="self-start px-2.5 pt-1.25 pb-1 rounded-sm bg-tcg08-ink text-tcg08-paper text-[.62rem] font-bold tracking-[0.2em] uppercase">Editorial</span>
        <h3 class="font-tcg08-serif font-black text-[clamp(1.05rem,1.6vw,1.35rem)] leading-[1.1] tracking-[-0.015em]">Long Reads</h3>
        <p class="max-w-[32ch] text-[clamp(.76rem,.95vw,.88rem)] leading-[1.45] text-tcg08-ink70 text-pretty">Six essays on quiet design, by writers who would rather you stayed.</p>
        <span class="mt-auto pt-2 text-[.72rem] font-bold tracking-[0.16em] uppercase tabular-nums text-tcg08-ink50">p.12</span>
      </article>
      <article class="flex flex-col gap-2.5 border-r border-tcg08-ink max-[720px]:border-r-0 max-[720px]:border-b max-[480px]:border-r-0 p-[clamp(20px,2.4vw,28px)] min-h-[clamp(180px,18vw,220px)]">
        <span class="self-start px-2.5 pt-1.25 pb-1 rounded-sm bg-tcg08-ink text-tcg08-paper text-[.62rem] font-bold tracking-[0.2em] uppercase">Interview</span>
        <h3 class="font-tcg08-serif font-black text-[clamp(1.05rem,1.6vw,1.35rem)] leading-[1.1] tracking-[-0.015em]">Massimo Vignelli</h3>
        <p class="max-w-[32ch] text-[clamp(.76rem,.95vw,.88rem)] leading-[1.45] text-tcg08-ink70 text-pretty">If you can design one thing, you can design everything. A conversation.</p>
        <span class="mt-auto pt-2 text-[.72rem] font-bold tracking-[0.16em] uppercase tabular-nums text-tcg08-ink50">p.24</span>
      </article>
      <article class="flex flex-col gap-2.5 bg-tcg08-ink text-tcg08-paper max-[720px]:col-span-full p-[clamp(20px,2.4vw,28px)] min-h-[clamp(180px,18vw,220px)]">
        <span class="self-start px-2.5 pt-1.25 pb-1 rounded-sm bg-tcg08-accent text-tcg08-paper text-[.62rem] font-bold tracking-[0.2em] uppercase">Read Next</span>
        <h3 class="font-tcg08-serif font-black text-[clamp(1.05rem,1.6vw,1.35rem)] leading-[1.1] tracking-[-0.015em]">The Slow Web Manifesto</h3>
        <p class="max-w-[32ch] text-[clamp(.76rem,.95vw,.88rem)] leading-[1.45] text-tcg08-paper78 text-pretty">Why the best sites in 2026 load in 3 seconds &mdash; on purpose.</p>
        <span class="mt-auto pt-2 text-[.72rem] font-bold tracking-[0.16em] uppercase tabular-nums text-tcg08-accent">p.38 &rarr;</span>
      </article>
    </div>

  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcg08-paper: #f1ece0;
  --color-tcg08-paper: oklch(0.94 0.02 85);
  --color-tcg08-paper78: #d5cfc2;
  --color-tcg08-paper78: oklch(0.85 0.02 85);
  --color-tcg08-ink: #1a1410;
  --color-tcg08-ink: oklch(0.2 0.02 50);
  --color-tcg08-ink70: #5a5148;
  --color-tcg08-ink70: oklch(0.44 0.02 55);
  --color-tcg08-ink60: #6b6158;
  --color-tcg08-ink60: oklch(0.5 0.02 55);
  --color-tcg08-ink50: #7b7168;
  --color-tcg08-ink50: oklch(0.56 0.02 55);
  --color-tcg08-tint: #ebe5d8;
  --color-tcg08-tint: oklch(0.92 0.02 85);
  --color-tcg08-dash: #b8b0a3;
  --color-tcg08-dash: oklch(0.76 0.02 80);
  --color-tcg08-accent: #c93a4a;
  --color-tcg08-accent: oklch(0.55 0.19 20);
  --font-tcg08-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tcg08-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-08 ::selection {
  background: #1a1410;
  color: #f1ece0;
}

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-tcg08-paper: #f1ece0;
  --color-tcg08-paper: oklch(0.94 0.02 85);
  --color-tcg08-paper78: #d5cfc2;
  --color-tcg08-paper78: oklch(0.85 0.02 85);
  --color-tcg08-ink: #1a1410;
  --color-tcg08-ink: oklch(0.2 0.02 50);
  --color-tcg08-ink70: #5a5148;
  --color-tcg08-ink70: oklch(0.44 0.02 55);
  --color-tcg08-ink60: #6b6158;
  --color-tcg08-ink60: oklch(0.5 0.02 55);
  --color-tcg08-ink50: #7b7168;
  --color-tcg08-ink50: oklch(0.56 0.02 55);
  --color-tcg08-tint: #ebe5d8;
  --color-tcg08-tint: oklch(0.92 0.02 85);
  --color-tcg08-dash: #b8b0a3;
  --color-tcg08-dash: oklch(0.76 0.02 80);
  --color-tcg08-accent: #c93a4a;
  --color-tcg08-accent: oklch(0.55 0.19 20);
  --font-tcg08-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tcg08-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-08 ::selection {
  background: #1a1410;
  color: #f1ece0;
}
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&family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&display=swap">

What changed in the port

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

  • Every grid-column rule in the CSS version becomes col-span-* on the region, and the three col-span-full strips make the spread's structure legible in about four lines of markup.
  • The CSS version's alpha inks (rgba(26,20,16,.7), .6, .5) became four solid tokens. Alpha text on a textured paper is a contrast gamble; opaque tokens hit the same look and hold 4.5:1.
  • The :last-child exception on the index rows is last:border-b-0 last:pb-0 — one of the cases where a structural pseudo-class has a first-class variant and the port is strictly shorter.
  • The newsprint texture stays an arbitrary background utility. It is a two-layer gradient, not a design token, and inlining it keeps the paper and its grain in the same class list.
  • Three media queries and a nest of !important border overrides collapse into max-[900px]:, max-[720px]: and max-[480px]: variants on the tiles; nothing needs !important because each rule now targets one element.
  • The pull quote became a <figure>/<figcaption> pair and the glyph is aria-hidden, so the quote reads once rather than twice.
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 Editorial Tabloid Bento Layout
Source: https://codefronts.com/layouts/tailwind-card-grid-layout/tailwind-editorial-tabloid-bento-layout/

A newsprint bento with a real masthead, a display-poster headline, an in-this-issue index with dashed leaders, a pull-quote ribbon and three section tiles &mdash; all inside one hairline-ruled 12-column grid. The port keeps every print convention and moves all twelve placement rules onto the tiles: col-span-full, col-span-8, col-span-4.
## HTML
```html
<section class="tcg-08 w-full min-h-svh flex items-center justify-center bg-tcg08-paper bg-[repeating-linear-gradient(0deg,oklch(0.2_0.03_50/0.025)_0_1px,transparent_1px_3px)] font-tcg08-sans text-tcg08-ink p-[clamp(20px,3vw,48px)]" aria-label="Editorial tabloid bento layout demo">
  <div class="w-full max-w-[1100px] grid grid-cols-12 gap-0 rounded overflow-hidden border-2 border-tcg08-ink bg-tcg08-paper">

    <div class="col-span-full flex flex-wrap items-center justify-between gap-3.5 border-b-2 border-tcg08-ink bg-tcg08-ink text-tcg08-paper px-[clamp(18px,2.2vw,28px)] py-[clamp(12px,1.4vw,18px)] max-[720px]:flex-col max-[720px]:items-start max-[720px]:gap-2">
      <span class="font-tcg08-serif italic font-black text-[clamp(1.1rem,1.8vw,1.6rem)] tracking-[0.01em] leading-none">THE BRUTALIST</span>
      <span class="flex flex-wrap items-center gap-[clamp(6px,1vw,12px)] text-[clamp(.62rem,.85vw,.74rem)] font-bold tracking-[0.18em] uppercase tabular-nums">
        <span>VOL. 07</span><span class="text-[.6em] opacity-55">&#9679;</span>
        <span>SUMMER 2026</span><span class="text-[.6em] opacity-55">&#9679;</span>
        <span>ISSUE 04</span><span class="text-[.6em] opacity-55">&#9679;</span>
        <span>$12</span>
      </span>
    </div>

    <div class="col-span-8 max-[900px]:col-span-7 max-[720px]:col-span-full flex flex-col justify-center gap-3.5 border-r border-b border-tcg08-ink max-[720px]:border-r-0 px-[clamp(28px,3vw,40px)] py-[clamp(28px,3.4vw,48px)]">
      <span class="text-[clamp(.66rem,.95vw,.78rem)] font-bold tracking-[0.22em] uppercase text-tcg08-accent">The cover story</span>
      <h2 class="font-tcg08-serif font-black text-[clamp(2.4rem,6.6vw,6rem)] leading-[0.88] tracking-[-0.035em]">Brutalist<br><span class="italic text-tcg08-accent">Web</span></h2>
      <span class="font-tcg08-serif italic max-w-[38ch] text-[clamp(.82rem,1.05vw,.96rem)] leading-[1.5] text-tcg08-ink70">Field notes from designers building louder, slower, and on purpose.</span>
    </div>

    <div class="col-span-4 max-[900px]:col-span-5 max-[720px]:col-span-full max-[720px]:border-t flex flex-col gap-3 border-b border-tcg08-ink bg-tcg08-tint px-[clamp(22px,2.4vw,28px)] py-[clamp(22px,2.4vw,32px)]">
      <div class="flex items-baseline justify-between pb-2.5 border-b-2 border-tcg08-ink">
        <span class="font-tcg08-serif italic font-black text-[clamp(.95rem,1.3vw,1.15rem)]">In this issue</span>
        <span class="text-[.62rem] font-bold tracking-[0.18em] uppercase opacity-65">04 / pieces</span>
      </div>
      <ol class="flex flex-col list-none">
        <li class="flex items-baseline gap-2 py-2.5 border-b border-dashed border-tcg08-dash last:border-b-0 last:pb-0">
          <span class="font-tcg08-serif font-black text-[.88rem] min-w-[1.6em] text-tcg08-accent">01</span>
          <span class="flex-1 text-[clamp(.74rem,.92vw,.86rem)] font-medium leading-[1.3]">The Brutalist Web</span>
          <span class="text-[.72rem] font-bold tabular-nums tracking-[0.04em] text-tcg08-ink60">p.12</span>
        </li>
        <li class="flex items-baseline gap-2 py-2.5 border-b border-dashed border-tcg08-dash last:border-b-0 last:pb-0">
          <span class="font-tcg08-serif font-black text-[.88rem] min-w-[1.6em] text-tcg08-accent">02</span>
          <span class="flex-1 text-[clamp(.74rem,.92vw,.86rem)] font-medium leading-[1.3]">Whitespace as protest</span>
          <span class="text-[.72rem] font-bold tabular-nums tracking-[0.04em] text-tcg08-ink60">p.24</span>
        </li>
        <li class="flex items-baseline gap-2 py-2.5 border-b border-dashed border-tcg08-dash last:border-b-0 last:pb-0">
          <span class="font-tcg08-serif font-black text-[.88rem] min-w-[1.6em] text-tcg08-accent">03</span>
          <span class="flex-1 text-[clamp(.74rem,.92vw,.86rem)] font-medium leading-[1.3]">Field notes from the type foundry</span>
          <span class="text-[.72rem] font-bold tabular-nums tracking-[0.04em] text-tcg08-ink60">p.38</span>
        </li>
        <li class="flex items-baseline gap-2 py-2.5 border-b border-dashed border-tcg08-dash last:border-b-0 last:pb-0">
          <span class="font-tcg08-serif font-black text-[.88rem] min-w-[1.6em] text-tcg08-accent">04</span>
          <span class="flex-1 text-[clamp(.74rem,.92vw,.86rem)] font-medium leading-[1.3]">Interview with Massimo Vignelli</span>
          <span class="text-[.72rem] font-bold tabular-nums tracking-[0.04em] text-tcg08-ink60">p.52</span>
        </li>
      </ol>
    </div>

    <figure class="col-span-full relative flex flex-col gap-2 border-b border-tcg08-ink bg-tcg08-paper px-[clamp(28px,3.4vw,56px)] py-[clamp(24px,3vw,40px)]">
      <span class="absolute -top-2.5 left-[clamp(12px,1.6vw,24px)] pointer-events-none font-tcg08-serif font-black leading-none opacity-15 text-tcg08-accent text-[clamp(5rem,12vw,10rem)]" aria-hidden="true">&ldquo;</span>
      <blockquote class="relative z-1 max-w-[32ch] font-tcg08-serif font-semibold text-[clamp(1.15rem,2.2vw,1.7rem)] leading-[1.32] tracking-[-0.005em]">Whitespace is a design choice. <em class="italic text-tcg08-accent">Not a bug.</em></blockquote>
      <figcaption class="text-[.7rem] font-bold tracking-[0.18em] uppercase text-tcg08-ink60">&mdash; Editorial, p. 24</figcaption>
    </figure>

    <div class="col-span-full grid grid-cols-3 max-[720px]:grid-cols-2 max-[480px]:grid-cols-1 gap-0">
      <article class="flex flex-col gap-2.5 border-r border-tcg08-ink max-[720px]:border-b max-[480px]:border-r-0 p-[clamp(20px,2.4vw,28px)] min-h-[clamp(180px,18vw,220px)]">
        <span class="self-start px-2.5 pt-1.25 pb-1 rounded-sm bg-tcg08-ink text-tcg08-paper text-[.62rem] font-bold tracking-[0.2em] uppercase">Editorial</span>
        <h3 class="font-tcg08-serif font-black text-[clamp(1.05rem,1.6vw,1.35rem)] leading-[1.1] tracking-[-0.015em]">Long Reads</h3>
        <p class="max-w-[32ch] text-[clamp(.76rem,.95vw,.88rem)] leading-[1.45] text-tcg08-ink70 text-pretty">Six essays on quiet design, by writers who would rather you stayed.</p>
        <span class="mt-auto pt-2 text-[.72rem] font-bold tracking-[0.16em] uppercase tabular-nums text-tcg08-ink50">p.12</span>
      </article>
      <article class="flex flex-col gap-2.5 border-r border-tcg08-ink max-[720px]:border-r-0 max-[720px]:border-b max-[480px]:border-r-0 p-[clamp(20px,2.4vw,28px)] min-h-[clamp(180px,18vw,220px)]">
        <span class="self-start px-2.5 pt-1.25 pb-1 rounded-sm bg-tcg08-ink text-tcg08-paper text-[.62rem] font-bold tracking-[0.2em] uppercase">Interview</span>
        <h3 class="font-tcg08-serif font-black text-[clamp(1.05rem,1.6vw,1.35rem)] leading-[1.1] tracking-[-0.015em]">Massimo Vignelli</h3>
        <p class="max-w-[32ch] text-[clamp(.76rem,.95vw,.88rem)] leading-[1.45] text-tcg08-ink70 text-pretty">If you can design one thing, you can design everything. A conversation.</p>
        <span class="mt-auto pt-2 text-[.72rem] font-bold tracking-[0.16em] uppercase tabular-nums text-tcg08-ink50">p.24</span>
      </article>
      <article class="flex flex-col gap-2.5 bg-tcg08-ink text-tcg08-paper max-[720px]:col-span-full p-[clamp(20px,2.4vw,28px)] min-h-[clamp(180px,18vw,220px)]">
        <span class="self-start px-2.5 pt-1.25 pb-1 rounded-sm bg-tcg08-accent text-tcg08-paper text-[.62rem] font-bold tracking-[0.2em] uppercase">Read Next</span>
        <h3 class="font-tcg08-serif font-black text-[clamp(1.05rem,1.6vw,1.35rem)] leading-[1.1] tracking-[-0.015em]">The Slow Web Manifesto</h3>
        <p class="max-w-[32ch] text-[clamp(.76rem,.95vw,.88rem)] leading-[1.45] text-tcg08-paper78 text-pretty">Why the best sites in 2026 load in 3 seconds &mdash; on purpose.</p>
        <span class="mt-auto pt-2 text-[.72rem] font-bold tracking-[0.16em] uppercase tabular-nums text-tcg08-accent">p.38 &rarr;</span>
      </article>
    </div>

  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcg08-paper: #f1ece0;
  --color-tcg08-paper: oklch(0.94 0.02 85);
  --color-tcg08-paper78: #d5cfc2;
  --color-tcg08-paper78: oklch(0.85 0.02 85);
  --color-tcg08-ink: #1a1410;
  --color-tcg08-ink: oklch(0.2 0.02 50);
  --color-tcg08-ink70: #5a5148;
  --color-tcg08-ink70: oklch(0.44 0.02 55);
  --color-tcg08-ink60: #6b6158;
  --color-tcg08-ink60: oklch(0.5 0.02 55);
  --color-tcg08-ink50: #7b7168;
  --color-tcg08-ink50: oklch(0.56 0.02 55);
  --color-tcg08-tint: #ebe5d8;
  --color-tcg08-tint: oklch(0.92 0.02 85);
  --color-tcg08-dash: #b8b0a3;
  --color-tcg08-dash: oklch(0.76 0.02 80);
  --color-tcg08-accent: #c93a4a;
  --color-tcg08-accent: oklch(0.55 0.19 20);
  --font-tcg08-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tcg08-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-08 ::selection {
  background: #1a1410;
  color: #f1ece0;
}
```

How this works

Twelve columns, five regions. The bento is grid grid-cols-12 gap-0 inside a 2px-bordered frame, and every region states its own width: the masthead and the ribbon are col-span-full, the headline is col-span-8, the index col-span-4. With gap-0, the rules between regions are ordinary border-r / border-b utilities — exactly how a printed grid works, and cheaper than a gap plus background trick.

The paper is one utility. The 3px-cycle newsprint line is an arbitrary bg-[repeating-linear-gradient(…)] on the section, with the paper colour as a second layer. It was a two-layer background shorthand in CSS and it is a two-layer arbitrary value here — no gain, no loss, and it stays on the element it paints.

The index keeps its leaders. Each <li> is flex items-baseline gap-2 py-2.5 border-b border-dashed, with last:border-b-0 last:pb-0 replacing the CSS version's :last-child rule. The number, the title and the page are three spans, and flex-1 on the title is what pushes the folio right.

Three breakpoints, all stated locally. The headline and index swap widths at max-[900px]:, stack at max-[720px]:, and the bottom strip goes from three columns to two to one — each on the element that changes, which is the only way a layout this ruled stays legible under edits.

Make it yours

  • Recolour the paper and ink through --color-tcg08-paper and --color-tcg08-ink; try a near-black paper for a dark-mode spread.
  • Change the editorial accent (kicker, index numerals, italic accent word, Read-Next pill) with --color-tcg08-accent.
  • Swap the display serif by pointing --font-tcg08-serif at any display face — Playfair, Cormorant, Tiempos.
  • Add index rows by copying an <li>; the dashed leader and the last: exception adapt with no re-indexing.
  • Widen the bottom strip to four tiles: change its grid-cols-3 and give the new tile the same pill / title / folio trio.

Gotchas — read before shipping

  • Arbitrary background values take no spaces: every stop pair in the repeating gradient uses the underscore escape, and the alpha is written oklch(0.2_0.03_50/0.025).
  • With gap-0 the rules are borders, so a tile that omits border-r or border-b leaves a visible hole in the frame — check the last tile in every row.
  • The frame needs overflow-hidden for the rounded corner, which means the quote glyph's negative -top-2.5 is clipped at the ribbon's own box, not the frame's; keep it inside the ribbon.
  • A display headline at clamp(2.8rem,6.6vw,6rem) with negative tracking can collapse word spaces at the minimum size. Test at 320px before shipping.
  • Dashed borders render as short dashes in older WebKit; if pixel-perfect dot leaders matter, swap the border for a repeating radial gradient.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Baseline Grid, borders, clamp() and gradients throughout; nothing modern-only in the layout. The floor quoted is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

pseudo elementstw ↗

Arbitraryneeds bracket syntax

repeating linear gradienttw ↗clamp()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →