15 Tailwind Card Grid Layouts
06 / 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 Featured Article Magazine Grid

One hero story on the left, four stacked supporting cards on the right, and colour-coded category pills so the wall can be scanned by section — the hierarchy every news homepage converges on. Five per-category colours live in @theme, which is exactly the case for a token: one value, used by many elements, meaningful across the design.

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-14 w-full min-h-svh bg-tcg14-bg font-tcg14-sans text-tcg14-ink px-[clamp(20px,3vw,40px)] py-[clamp(24px,3vw,40px)]" aria-label="Featured article magazine grid demo">

  <header class="max-w-[1240px] mx-auto flex flex-wrap items-center justify-between gap-3 pb-4.5 mb-[clamp(24px,3vw,40px)] border-b-2 border-tcg14-ink">
    <span class="font-tcg14-serif italic font-black text-[clamp(1.5rem,2.4vw,2rem)] tracking-[-0.01em]">The Quarterly</span>
    <span class="text-[.78rem] font-bold tracking-[0.18em] uppercase text-tcg14-muted">Issue 38 &middot; Summer 2026</span>
  </header>

  <div class="max-w-[1240px] mx-auto grid [grid-template-columns:1.5fr_1fr] max-[900px]:[grid-template-columns:1fr] gap-[clamp(20px,2.6vw,36px)]">

    <article class="group flex flex-col overflow-hidden rounded-[14px] border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_18px_36px_-18px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="h-[clamp(220px,28vw,360px)] bg-[linear-gradient(180deg,oklch(0.21_0.04_260/0)_60%,oklch(0.21_0.04_260/0.4)),linear-gradient(135deg,#dc2626_0%,#7c1d1d_60%,#1a0a0a_100%)]" aria-hidden="true"></div>
      <div class="flex flex-col gap-3 p-[clamp(22px,2.4vw,32px)]">
        <span class="self-start px-2.5 py-1 rounded-[3px] bg-tcg14-cat-politics text-white text-[.66rem] font-bold tracking-[0.18em] uppercase">Politics</span>
        <h2 class="font-tcg14-serif font-black text-[clamp(1.6rem,2.8vw,2.4rem)] leading-[1.1] tracking-[-0.02em] text-pretty"><a href="#feature" class="no-underline text-tcg14-ink hover:text-tcg14-cat-politics focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">The Quiet Reformers Behind 2026's Strangest Bipartisan Bill</a></h2>
        <p class="text-[clamp(.95rem,1.15vw,1.06rem)] leading-[1.5] text-tcg14-muted text-pretty">A coalition of 14 senators, six think tanks, and a Reddit forum spent three years drafting the housing reform nobody believed could pass. It just did.</p>
        <footer class="flex flex-wrap items-center gap-2.5 mt-1 pt-3.5 border-t border-tcg14-line text-[.82rem] text-tcg14-muted">
          <span class="flex items-center gap-2.5">
            <span class="w-8 h-8 rounded-full bg-linear-[135deg,#f9c1cf,#d97a99]" aria-hidden="true"></span>
            <span><strong class="font-bold text-tcg14-ink">Maya Chen</strong> &middot; Politics Editor</span>
          </span>
          <span class="text-[.5rem] opacity-40" aria-hidden="true">&#9679;</span>
          <span class="font-semibold">14 min read</span>
          <span class="text-[.5rem] opacity-40" aria-hidden="true">&#9679;</span>
          <time datetime="2026-06-28" class="font-semibold">June 28, 2026</time>
        </footer>
      </div>
    </article>

    <div class="grid [grid-template-rows:repeat(4,1fr)] gap-[clamp(12px,1.4vw,16px)]">

      <article class="flex max-[520px]:flex-col gap-3.5 p-3.5 rounded-xl border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-0.5 hover:shadow-[0_12px_22px_-14px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
        <div class="shrink-0 w-24 h-24 max-[520px]:w-full max-[520px]:h-35 rounded-lg bg-linear-[135deg,#0ea5e9,#0c4a6e]" aria-hidden="true"></div>
        <div class="flex-1 min-w-0 flex flex-col justify-between gap-1.5">
          <span class="self-start px-2 py-0.75 rounded-[3px] bg-tcg14-cat-tech text-white text-[.6rem] font-bold tracking-[0.16em] uppercase">Tech</span>
          <h3 class="font-tcg14-serif font-extrabold text-[clamp(.95rem,1.2vw,1.1rem)] leading-[1.22] text-pretty"><a href="#tech" class="no-underline text-tcg14-ink hover:text-tcg14-cat-tech focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">The Engineer Who Resigned Over an AI Memo</a></h3>
          <span class="text-[.74rem] font-semibold text-tcg14-muted">8 min &middot; June 27</span>
        </div>
      </article>

      <article class="flex max-[520px]:flex-col gap-3.5 p-3.5 rounded-xl border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-0.5 hover:shadow-[0_12px_22px_-14px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
        <div class="shrink-0 w-24 h-24 max-[520px]:w-full max-[520px]:h-35 rounded-lg bg-linear-[135deg,#c026d3,#581c87]" aria-hidden="true"></div>
        <div class="flex-1 min-w-0 flex flex-col justify-between gap-1.5">
          <span class="self-start px-2 py-0.75 rounded-[3px] bg-tcg14-cat-culture text-white text-[.6rem] font-bold tracking-[0.16em] uppercase">Culture</span>
          <h3 class="font-tcg14-serif font-extrabold text-[clamp(.95rem,1.2vw,1.1rem)] leading-[1.22] text-pretty"><a href="#culture" class="no-underline text-tcg14-ink hover:text-tcg14-cat-culture focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">Why the Best Bookstores in 2026 Have Bouncers</a></h3>
          <span class="text-[.74rem] font-semibold text-tcg14-muted">6 min &middot; June 26</span>
        </div>
      </article>

      <article class="flex max-[520px]:flex-col gap-3.5 p-3.5 rounded-xl border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-0.5 hover:shadow-[0_12px_22px_-14px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
        <div class="shrink-0 w-24 h-24 max-[520px]:w-full max-[520px]:h-35 rounded-lg bg-linear-[135deg,#16a34a,#14532d]" aria-hidden="true"></div>
        <div class="flex-1 min-w-0 flex flex-col justify-between gap-1.5">
          <span class="self-start px-2 py-0.75 rounded-[3px] bg-tcg14-cat-climate text-white text-[.6rem] font-bold tracking-[0.16em] uppercase">Climate</span>
          <h3 class="font-tcg14-serif font-extrabold text-[clamp(.95rem,1.2vw,1.1rem)] leading-[1.22] text-pretty"><a href="#climate" class="no-underline text-tcg14-ink hover:text-tcg14-cat-climate focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">The Farmers Quietly Outsmarting the Drought</a></h3>
          <span class="text-[.74rem] font-semibold text-tcg14-muted">11 min &middot; June 25</span>
        </div>
      </article>

      <article class="flex max-[520px]:flex-col gap-3.5 p-3.5 rounded-xl border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-0.5 hover:shadow-[0_12px_22px_-14px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
        <div class="shrink-0 w-24 h-24 max-[520px]:w-full max-[520px]:h-35 rounded-lg bg-linear-[135deg,#dc2626,#7c1d1d]" aria-hidden="true"></div>
        <div class="flex-1 min-w-0 flex flex-col justify-between gap-1.5">
          <span class="self-start px-2 py-0.75 rounded-[3px] bg-tcg14-cat-biz text-white text-[.6rem] font-bold tracking-[0.16em] uppercase">Business</span>
          <h3 class="font-tcg14-serif font-extrabold text-[clamp(.95rem,1.2vw,1.1rem)] leading-[1.22] text-pretty"><a href="#business" class="no-underline text-tcg14-ink hover:text-tcg14-cat-biz focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">Inside the Five-Day Workweek Comeback</a></h3>
          <span class="text-[.74rem] font-semibold text-tcg14-muted">9 min &middot; June 24</span>
        </div>
      </article>

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

@theme {
  --color-tcg14-bg: #fffefb;
  --color-tcg14-bg: oklch(0.995 0.004 95);
  --color-tcg14-card: #ffffff;
  --color-tcg14-card: oklch(1 0 0);
  --color-tcg14-ink: #0f172a;
  --color-tcg14-ink: oklch(0.21 0.04 260);
  --color-tcg14-muted: #64748b;
  --color-tcg14-muted: oklch(0.55 0.03 257);
  --color-tcg14-line: #e7e3d8;
  --color-tcg14-line: oklch(0.91 0.01 90);
  --color-tcg14-cat-politics: #0f172a;
  --color-tcg14-cat-politics: oklch(0.21 0.04 260);
  --color-tcg14-cat-tech: #0369a1;
  --color-tcg14-cat-tech: oklch(0.48 0.13 245);
  --color-tcg14-cat-culture: #a21caf;
  --color-tcg14-cat-culture: oklch(0.48 0.24 320);
  --color-tcg14-cat-climate: #15803d;
  --color-tcg14-cat-climate: oklch(0.5 0.14 150);
  --color-tcg14-cat-biz: #b91c1c;
  --color-tcg14-cat-biz: oklch(0.48 0.2 27);
  --font-tcg14-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tcg14-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-14 ::selection {
  background: #0f172a;
  color: #fff;
}

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-tcg14-bg: #fffefb;
  --color-tcg14-bg: oklch(0.995 0.004 95);
  --color-tcg14-card: #ffffff;
  --color-tcg14-card: oklch(1 0 0);
  --color-tcg14-ink: #0f172a;
  --color-tcg14-ink: oklch(0.21 0.04 260);
  --color-tcg14-muted: #64748b;
  --color-tcg14-muted: oklch(0.55 0.03 257);
  --color-tcg14-line: #e7e3d8;
  --color-tcg14-line: oklch(0.91 0.01 90);
  --color-tcg14-cat-politics: #0f172a;
  --color-tcg14-cat-politics: oklch(0.21 0.04 260);
  --color-tcg14-cat-tech: #0369a1;
  --color-tcg14-cat-tech: oklch(0.48 0.13 245);
  --color-tcg14-cat-culture: #a21caf;
  --color-tcg14-cat-culture: oklch(0.48 0.24 320);
  --color-tcg14-cat-climate: #15803d;
  --color-tcg14-cat-climate: oklch(0.5 0.14 150);
  --color-tcg14-cat-biz: #b91c1c;
  --color-tcg14-cat-biz: oklch(0.48 0.2 27);
  --font-tcg14-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tcg14-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-14 ::selection {
  background: #0f172a;
  color: #fff;
}
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,900&display=swap">

What changed in the port

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

  • The five --cat-* variables graduate from plain custom properties to @theme entries, which is what turns them into bg-tcg14-cat-tech and removes five .cat--N rules from the stylesheet.
  • Each pill token was darkened from the CSS version's brighter hues so white pill text clears 4.5:1 — the port was the moment to fix a contrast bug that a stylesheet full of brand colours tends to hide.
  • Both track lists stay arbitrary. 1.5fr_1fr and repeat(4,1fr) are ratios and function calls, and Tailwind's grid-cols-* scale cannot express either.
  • The headline became a link inside the heading rather than a hoverable card, so the hover lift now has a focus-within: twin and keyboard users get the same affordance.
  • Two media queries become max-[900px]: on the outer grid and max-[520px]: on the support cards — the mobile restack is two variants on the card and one on its thumb.
  • Dates moved into <time datetime> elements; the visual result is identical and the markup is now machine-readable.
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 Featured Article Magazine Grid
Source: https://codefronts.com/layouts/tailwind-card-grid-layout/tailwind-featured-article-magazine-grid/

One hero story on the left, four stacked supporting cards on the right, and colour-coded category pills so the wall can be scanned by section &mdash; the hierarchy every news homepage converges on. Five per-category colours live in @theme, which is exactly the case for a token: one value, used by many elements, meaningful across the design.
## HTML
```html
<section class="tcg-14 w-full min-h-svh bg-tcg14-bg font-tcg14-sans text-tcg14-ink px-[clamp(20px,3vw,40px)] py-[clamp(24px,3vw,40px)]" aria-label="Featured article magazine grid demo">

  <header class="max-w-[1240px] mx-auto flex flex-wrap items-center justify-between gap-3 pb-4.5 mb-[clamp(24px,3vw,40px)] border-b-2 border-tcg14-ink">
    <span class="font-tcg14-serif italic font-black text-[clamp(1.5rem,2.4vw,2rem)] tracking-[-0.01em]">The Quarterly</span>
    <span class="text-[.78rem] font-bold tracking-[0.18em] uppercase text-tcg14-muted">Issue 38 &middot; Summer 2026</span>
  </header>

  <div class="max-w-[1240px] mx-auto grid [grid-template-columns:1.5fr_1fr] max-[900px]:[grid-template-columns:1fr] gap-[clamp(20px,2.6vw,36px)]">

    <article class="group flex flex-col overflow-hidden rounded-[14px] border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_18px_36px_-18px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="h-[clamp(220px,28vw,360px)] bg-[linear-gradient(180deg,oklch(0.21_0.04_260/0)_60%,oklch(0.21_0.04_260/0.4)),linear-gradient(135deg,#dc2626_0%,#7c1d1d_60%,#1a0a0a_100%)]" aria-hidden="true"></div>
      <div class="flex flex-col gap-3 p-[clamp(22px,2.4vw,32px)]">
        <span class="self-start px-2.5 py-1 rounded-[3px] bg-tcg14-cat-politics text-white text-[.66rem] font-bold tracking-[0.18em] uppercase">Politics</span>
        <h2 class="font-tcg14-serif font-black text-[clamp(1.6rem,2.8vw,2.4rem)] leading-[1.1] tracking-[-0.02em] text-pretty"><a href="#feature" class="no-underline text-tcg14-ink hover:text-tcg14-cat-politics focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">The Quiet Reformers Behind 2026's Strangest Bipartisan Bill</a></h2>
        <p class="text-[clamp(.95rem,1.15vw,1.06rem)] leading-[1.5] text-tcg14-muted text-pretty">A coalition of 14 senators, six think tanks, and a Reddit forum spent three years drafting the housing reform nobody believed could pass. It just did.</p>
        <footer class="flex flex-wrap items-center gap-2.5 mt-1 pt-3.5 border-t border-tcg14-line text-[.82rem] text-tcg14-muted">
          <span class="flex items-center gap-2.5">
            <span class="w-8 h-8 rounded-full bg-linear-[135deg,#f9c1cf,#d97a99]" aria-hidden="true"></span>
            <span><strong class="font-bold text-tcg14-ink">Maya Chen</strong> &middot; Politics Editor</span>
          </span>
          <span class="text-[.5rem] opacity-40" aria-hidden="true">&#9679;</span>
          <span class="font-semibold">14 min read</span>
          <span class="text-[.5rem] opacity-40" aria-hidden="true">&#9679;</span>
          <time datetime="2026-06-28" class="font-semibold">June 28, 2026</time>
        </footer>
      </div>
    </article>

    <div class="grid [grid-template-rows:repeat(4,1fr)] gap-[clamp(12px,1.4vw,16px)]">

      <article class="flex max-[520px]:flex-col gap-3.5 p-3.5 rounded-xl border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-0.5 hover:shadow-[0_12px_22px_-14px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
        <div class="shrink-0 w-24 h-24 max-[520px]:w-full max-[520px]:h-35 rounded-lg bg-linear-[135deg,#0ea5e9,#0c4a6e]" aria-hidden="true"></div>
        <div class="flex-1 min-w-0 flex flex-col justify-between gap-1.5">
          <span class="self-start px-2 py-0.75 rounded-[3px] bg-tcg14-cat-tech text-white text-[.6rem] font-bold tracking-[0.16em] uppercase">Tech</span>
          <h3 class="font-tcg14-serif font-extrabold text-[clamp(.95rem,1.2vw,1.1rem)] leading-[1.22] text-pretty"><a href="#tech" class="no-underline text-tcg14-ink hover:text-tcg14-cat-tech focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">The Engineer Who Resigned Over an AI Memo</a></h3>
          <span class="text-[.74rem] font-semibold text-tcg14-muted">8 min &middot; June 27</span>
        </div>
      </article>

      <article class="flex max-[520px]:flex-col gap-3.5 p-3.5 rounded-xl border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-0.5 hover:shadow-[0_12px_22px_-14px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
        <div class="shrink-0 w-24 h-24 max-[520px]:w-full max-[520px]:h-35 rounded-lg bg-linear-[135deg,#c026d3,#581c87]" aria-hidden="true"></div>
        <div class="flex-1 min-w-0 flex flex-col justify-between gap-1.5">
          <span class="self-start px-2 py-0.75 rounded-[3px] bg-tcg14-cat-culture text-white text-[.6rem] font-bold tracking-[0.16em] uppercase">Culture</span>
          <h3 class="font-tcg14-serif font-extrabold text-[clamp(.95rem,1.2vw,1.1rem)] leading-[1.22] text-pretty"><a href="#culture" class="no-underline text-tcg14-ink hover:text-tcg14-cat-culture focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">Why the Best Bookstores in 2026 Have Bouncers</a></h3>
          <span class="text-[.74rem] font-semibold text-tcg14-muted">6 min &middot; June 26</span>
        </div>
      </article>

      <article class="flex max-[520px]:flex-col gap-3.5 p-3.5 rounded-xl border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-0.5 hover:shadow-[0_12px_22px_-14px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
        <div class="shrink-0 w-24 h-24 max-[520px]:w-full max-[520px]:h-35 rounded-lg bg-linear-[135deg,#16a34a,#14532d]" aria-hidden="true"></div>
        <div class="flex-1 min-w-0 flex flex-col justify-between gap-1.5">
          <span class="self-start px-2 py-0.75 rounded-[3px] bg-tcg14-cat-climate text-white text-[.6rem] font-bold tracking-[0.16em] uppercase">Climate</span>
          <h3 class="font-tcg14-serif font-extrabold text-[clamp(.95rem,1.2vw,1.1rem)] leading-[1.22] text-pretty"><a href="#climate" class="no-underline text-tcg14-ink hover:text-tcg14-cat-climate focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">The Farmers Quietly Outsmarting the Drought</a></h3>
          <span class="text-[.74rem] font-semibold text-tcg14-muted">11 min &middot; June 25</span>
        </div>
      </article>

      <article class="flex max-[520px]:flex-col gap-3.5 p-3.5 rounded-xl border border-tcg14-line bg-tcg14-card transition-[translate,box-shadow] duration-250 hover:-translate-y-0.5 hover:shadow-[0_12px_22px_-14px_oklch(0.2_0.04_260/0.18)] focus-within:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
        <div class="shrink-0 w-24 h-24 max-[520px]:w-full max-[520px]:h-35 rounded-lg bg-linear-[135deg,#dc2626,#7c1d1d]" aria-hidden="true"></div>
        <div class="flex-1 min-w-0 flex flex-col justify-between gap-1.5">
          <span class="self-start px-2 py-0.75 rounded-[3px] bg-tcg14-cat-biz text-white text-[.6rem] font-bold tracking-[0.16em] uppercase">Business</span>
          <h3 class="font-tcg14-serif font-extrabold text-[clamp(.95rem,1.2vw,1.1rem)] leading-[1.22] text-pretty"><a href="#business" class="no-underline text-tcg14-ink hover:text-tcg14-cat-biz focus-visible:outline-2 focus-visible:outline-tcg14-ink focus-visible:outline-offset-3">Inside the Five-Day Workweek Comeback</a></h3>
          <span class="text-[.74rem] font-semibold text-tcg14-muted">9 min &middot; June 24</span>
        </div>
      </article>

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

@theme {
  --color-tcg14-bg: #fffefb;
  --color-tcg14-bg: oklch(0.995 0.004 95);
  --color-tcg14-card: #ffffff;
  --color-tcg14-card: oklch(1 0 0);
  --color-tcg14-ink: #0f172a;
  --color-tcg14-ink: oklch(0.21 0.04 260);
  --color-tcg14-muted: #64748b;
  --color-tcg14-muted: oklch(0.55 0.03 257);
  --color-tcg14-line: #e7e3d8;
  --color-tcg14-line: oklch(0.91 0.01 90);
  --color-tcg14-cat-politics: #0f172a;
  --color-tcg14-cat-politics: oklch(0.21 0.04 260);
  --color-tcg14-cat-tech: #0369a1;
  --color-tcg14-cat-tech: oklch(0.48 0.13 245);
  --color-tcg14-cat-culture: #a21caf;
  --color-tcg14-cat-culture: oklch(0.48 0.24 320);
  --color-tcg14-cat-climate: #15803d;
  --color-tcg14-cat-climate: oklch(0.5 0.14 150);
  --color-tcg14-cat-biz: #b91c1c;
  --color-tcg14-cat-biz: oklch(0.48 0.2 27);
  --font-tcg14-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tcg14-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-14 ::selection {
  background: #0f172a;
  color: #fff;
}
```

How this works

Two grids, four utilities. The page is grid [grid-template-columns:1.5fr_1fr]; the right column is itself grid [grid-template-rows:repeat(4,1fr)] so the four support cards divide the hero's height exactly. Both track lists are arbitrary properties because fractional ratios and repeat() are not column counts.

Category colour is a token, and that is the test. Five sections, each with a colour used on pills across the wall — used by many elements, meaningful design-wide, so @theme. Compare demo 13, where a per-card accent stayed an inline custom property because it belonged to one instance. Same mechanism, opposite verdict, and the reason is reuse.

The support card is a flex row that becomes a column. flex gap-3.5 with a shrink-0 w-24 h-24 rounded-lg thumb, then max-[520px]:flex-col and max-[520px]:w-full max-[520px]:h-35 on the thumb. Two variants replace the whole mobile block.

Hover lift, stated once per card. hover:-translate-y-[3px] hover:shadow-[…] with a motion-reduce: twin, and because the cards are real links the same treatment hangs off focus-visible: for keyboard users — something the CSS original did not do.

Make it yours

  • Recolour any section through its --color-tcg14-cat-* token; the pill text stays white, so keep the token dark enough to clear 4.5:1.
  • Swap the hero gradient for a photo: replace the two-layer bg-[…] with bg-[url(cover.jpg)] bg-cover bg-center and keep the wash layer if the headline sits over it.
  • Add a fifth support card by changing [grid-template-rows:repeat(4,1fr)] to repeat(5,1fr).
  • Flip the hierarchy by swapping the outer ratio to [grid-template-columns:1fr_1.5fr] and moving the hero after the support column in source order.
  • Drop read-times on the support cards by deleting the <time> element; nothing else depends on it.

Gotchas — read before shipping

  • 1.5fr_1fr must be typed with the underscore escape and no spaces, or the utility silently produces no CSS.
  • [grid-template-rows:repeat(4,1fr)] on the support column makes all four cards equal height, which means a long headline in one card grows all of them; use auto rows if you want ragged cards.
  • The hero's fixed cover height (clamp(220px,28vw,360px)) crops portrait photography. Add aspect-video instead if the art direction is unpredictable.
  • Category pill colours must clear 4.5:1 against white text; the five tokens here do, but a lighter brand colour will not.
  • Cards are links, so the hover lift needs a focus-visible: equivalent — a keyboard user gets no hover, and a shadow alone is not a focus indicator.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Baseline Grid + Flexbox and CSS gradients throughout. The floor quoted is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

flexboxtw ↗linear gradienttw ↗transitionstw ↗aspect-ratiotw ↗prefers-reduced-motiontw ↗

Arbitraryneeds bracket syntax

clamp()tw ↗

HTML & JSno Tailwind involved

time elementMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →