15 Tailwind Card Grid Layouts
04 / 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 Testimonial Wall Grid

Six customer quotes on a four-column wall, with one dark 2×2 hero quote anchoring it. The port's interesting part is the inversion: the featured card's dark treatment is a class group on one element (bg-tcg11-featbg text-tcg11-featink) and its children inherit, so the CSS version's six .card--featured .x descendant rules shrink to two text-* overrides.

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-11 w-full min-h-svh bg-tcg11-bg font-tcg11-sans text-tcg11-ink px-[clamp(20px,3vw,48px)] py-[clamp(32px,4vw,64px)]" aria-label="Testimonial wall grid demo">

  <header class="max-w-[600px] mx-auto text-center mb-[clamp(32px,4vw,48px)]">
    <span class="inline-block mb-2.5 text-[.72rem] font-bold tracking-[0.2em] uppercase text-tcg11-muted">Customer love</span>
    <h2 class="text-[clamp(1.8rem,3.4vw,2.6rem)] font-extrabold tracking-[-0.02em] leading-[1.1]">2,400+ teams ship faster.</h2>
  </header>

  <div class="max-w-[1180px] mx-auto grid grid-cols-4 max-[960px]:grid-cols-2 max-[560px]:grid-cols-1 [grid-auto-rows:minmax(200px,auto)] gap-[clamp(14px,1.6vw,20px)]">

    <figure class="col-span-2 row-span-2 max-[960px]:row-span-1 max-[560px]:col-span-1 flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-featbg bg-tcg11-featbg text-tcg11-featink p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[1.1rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(1.15rem,1.8vw,1.5rem)] font-medium leading-[1.35] tracking-[-0.005em] text-pretty">We replaced four tools with one. Our deploys went from 12 minutes to under 90 seconds, and the whole engineering team finally agrees on something. Worth every penny.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-12 h-12 rounded-full bg-linear-[135deg,#f9c1cf,#d97a99]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Maya Chen</span>
          <span class="text-[.78rem] text-tcg11-featdim">VP Engineering &middot; <strong class="font-bold text-tcg11-featink">Linear</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">The onboarding alone saved us a week. We were live in three hours.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#a7c8e7,#5b8fd9]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Liam Okonkwo</span>
          <span class="text-[.78rem] text-tcg11-muted">CTO &middot; <strong class="font-bold text-tcg11-ink">Plaid</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">Honestly the best support team I have worked with in 12 years of building SaaS.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#c5da9c,#7aa852]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Aria Patel</span>
          <span class="text-[.78rem] text-tcg11-muted">Founder &middot; <strong class="font-bold text-tcg11-ink">Resend</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 4 out of 5">&#9733;&#9733;&#9733;&#9733;<span class="text-tcg11-star-off">&#9733;</span></div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">4 stars only because we keep finding new things we wish it did. It does most of them next quarter.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#f7b88a,#d97f4f]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Noah Reyes</span>
          <span class="text-[.78rem] text-tcg11-muted">Eng Lead &middot; <strong class="font-bold text-tcg11-ink">Vercel</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">Our incident response time dropped 73%. Board noticed.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#c4b5fd,#9b87e5]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Zoe Larsson</span>
          <span class="text-[.78rem] text-tcg11-muted">SRE Manager &middot; <strong class="font-bold text-tcg11-ink">Stripe</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">We tried five alternatives. Came back here on day three.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#fef0a3,#e6c54a]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Sam Okafor</span>
          <span class="text-[.78rem] text-tcg11-muted">Product &middot; <strong class="font-bold text-tcg11-ink">Notion</strong></span>
        </div>
      </figcaption>
    </figure>

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

@theme {
  --color-tcg11-bg: #f8fafc;
  --color-tcg11-bg: oklch(0.98 0.004 250);
  --color-tcg11-card: #ffffff;
  --color-tcg11-card: oklch(1 0 0);
  --color-tcg11-ink: #0f172a;
  --color-tcg11-ink: oklch(0.21 0.04 260);
  --color-tcg11-muted: #64748b;
  --color-tcg11-muted: oklch(0.55 0.03 257);
  --color-tcg11-line: #e2e8f0;
  --color-tcg11-line: oklch(0.92 0.01 255);
  --color-tcg11-accent: #f59e0b;
  --color-tcg11-accent: oklch(0.77 0.16 70);
  --color-tcg11-star-off: #94a3b8;
  --color-tcg11-star-off: oklch(0.71 0.03 257);
  --color-tcg11-featbg: #0f172a;
  --color-tcg11-featbg: oklch(0.21 0.04 260);
  --color-tcg11-featink: #f8fafc;
  --color-tcg11-featink: oklch(0.98 0.004 250);
  --color-tcg11-featdim: #a4b0c2;
  --color-tcg11-featdim: oklch(0.76 0.02 257);
  --font-tcg11-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-11 ::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-tcg11-bg: #f8fafc;
  --color-tcg11-bg: oklch(0.98 0.004 250);
  --color-tcg11-card: #ffffff;
  --color-tcg11-card: oklch(1 0 0);
  --color-tcg11-ink: #0f172a;
  --color-tcg11-ink: oklch(0.21 0.04 260);
  --color-tcg11-muted: #64748b;
  --color-tcg11-muted: oklch(0.55 0.03 257);
  --color-tcg11-line: #e2e8f0;
  --color-tcg11-line: oklch(0.92 0.01 255);
  --color-tcg11-accent: #f59e0b;
  --color-tcg11-accent: oklch(0.77 0.16 70);
  --color-tcg11-star-off: #94a3b8;
  --color-tcg11-star-off: oklch(0.71 0.03 257);
  --color-tcg11-featbg: #0f172a;
  --color-tcg11-featbg: oklch(0.21 0.04 260);
  --color-tcg11-featink: #f8fafc;
  --color-tcg11-featink: oklch(0.98 0.004 250);
  --color-tcg11-featdim: #a4b0c2;
  --color-tcg11-featdim: oklch(0.76 0.02 257);
  --font-tcg11-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-11 ::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=JetBrains+Mono:wght@400;500;600&display=swap">

What changed in the port

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

  • Six descendant rules for the dark card become one class group plus two colour overrides. Inheritance is the port's shortcut here, and it only works because the dark treatment sets text-* on the card rather than on each child.
  • The dimmed role line uses a real token (--color-tcg11-featdim) instead of the CSS version's rgba(248,250,252,.65). Alpha-muting body text is also a contrast risk, so the token is set to a value that clears 4.5:1 on the dark card.
  • [grid-auto-rows:minmax(200px,auto)] stays arbitrary. A row floor is a function call, not a design-scale value, and Tailwind is right not to ship a scale for it.
  • The markup moved from <article> + <footer> to <figure> + <figcaption>, which is what a quote with an attribution actually is.
  • Both media queries become max-[960px]: and max-[560px]: variants on the grid and the hero — the hero's unwind is row-span-1 then col-span-1, visible on the card it applies to.
  • The empty star is a nested <span> with its own token rather than an opacity on the row, so the four filled stars keep their full colour.
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 Testimonial Wall Grid
Source: https://codefronts.com/layouts/tailwind-card-grid-layout/tailwind-testimonial-wall-grid/

Six customer quotes on a four-column wall, with one dark 2&times;2 hero quote anchoring it. The port's interesting part is the inversion: the featured card's dark treatment is a class group on one element (bg-tcg11-featbg text-tcg11-featink) and its children inherit, so the CSS version's six .card--featured .x descendant rules shrink to two text-* overrides.
## HTML
```html
<section class="tcg-11 w-full min-h-svh bg-tcg11-bg font-tcg11-sans text-tcg11-ink px-[clamp(20px,3vw,48px)] py-[clamp(32px,4vw,64px)]" aria-label="Testimonial wall grid demo">

  <header class="max-w-[600px] mx-auto text-center mb-[clamp(32px,4vw,48px)]">
    <span class="inline-block mb-2.5 text-[.72rem] font-bold tracking-[0.2em] uppercase text-tcg11-muted">Customer love</span>
    <h2 class="text-[clamp(1.8rem,3.4vw,2.6rem)] font-extrabold tracking-[-0.02em] leading-[1.1]">2,400+ teams ship faster.</h2>
  </header>

  <div class="max-w-[1180px] mx-auto grid grid-cols-4 max-[960px]:grid-cols-2 max-[560px]:grid-cols-1 [grid-auto-rows:minmax(200px,auto)] gap-[clamp(14px,1.6vw,20px)]">

    <figure class="col-span-2 row-span-2 max-[960px]:row-span-1 max-[560px]:col-span-1 flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-featbg bg-tcg11-featbg text-tcg11-featink p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[1.1rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(1.15rem,1.8vw,1.5rem)] font-medium leading-[1.35] tracking-[-0.005em] text-pretty">We replaced four tools with one. Our deploys went from 12 minutes to under 90 seconds, and the whole engineering team finally agrees on something. Worth every penny.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-12 h-12 rounded-full bg-linear-[135deg,#f9c1cf,#d97a99]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Maya Chen</span>
          <span class="text-[.78rem] text-tcg11-featdim">VP Engineering &middot; <strong class="font-bold text-tcg11-featink">Linear</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">The onboarding alone saved us a week. We were live in three hours.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#a7c8e7,#5b8fd9]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Liam Okonkwo</span>
          <span class="text-[.78rem] text-tcg11-muted">CTO &middot; <strong class="font-bold text-tcg11-ink">Plaid</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">Honestly the best support team I have worked with in 12 years of building SaaS.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#c5da9c,#7aa852]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Aria Patel</span>
          <span class="text-[.78rem] text-tcg11-muted">Founder &middot; <strong class="font-bold text-tcg11-ink">Resend</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 4 out of 5">&#9733;&#9733;&#9733;&#9733;<span class="text-tcg11-star-off">&#9733;</span></div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">4 stars only because we keep finding new things we wish it did. It does most of them next quarter.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#f7b88a,#d97f4f]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Noah Reyes</span>
          <span class="text-[.78rem] text-tcg11-muted">Eng Lead &middot; <strong class="font-bold text-tcg11-ink">Vercel</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">Our incident response time dropped 73%. Board noticed.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#c4b5fd,#9b87e5]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Zoe Larsson</span>
          <span class="text-[.78rem] text-tcg11-muted">SRE Manager &middot; <strong class="font-bold text-tcg11-ink">Stripe</strong></span>
        </div>
      </figcaption>
    </figure>

    <figure class="flex flex-col justify-between gap-4 rounded-2xl border border-tcg11-line bg-tcg11-card p-[clamp(18px,2vw,24px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_14px_28px_-14px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="text-[.95rem] tracking-[0.1em] tabular-nums text-tcg11-accent" aria-label="Rated 5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="text-[clamp(.94rem,1.05vw,1rem)] leading-[1.5] text-pretty">We tried five alternatives. Came back here on day three.</blockquote>
      <figcaption class="flex items-center gap-3">
        <div class="shrink-0 w-10 h-10 rounded-full bg-linear-[135deg,#fef0a3,#e6c54a]" aria-hidden="true"></div>
        <div class="flex flex-col gap-px min-w-0">
          <span class="text-[.92rem] font-bold">Sam Okafor</span>
          <span class="text-[.78rem] text-tcg11-muted">Product &middot; <strong class="font-bold text-tcg11-ink">Notion</strong></span>
        </div>
      </figcaption>
    </figure>

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

@theme {
  --color-tcg11-bg: #f8fafc;
  --color-tcg11-bg: oklch(0.98 0.004 250);
  --color-tcg11-card: #ffffff;
  --color-tcg11-card: oklch(1 0 0);
  --color-tcg11-ink: #0f172a;
  --color-tcg11-ink: oklch(0.21 0.04 260);
  --color-tcg11-muted: #64748b;
  --color-tcg11-muted: oklch(0.55 0.03 257);
  --color-tcg11-line: #e2e8f0;
  --color-tcg11-line: oklch(0.92 0.01 255);
  --color-tcg11-accent: #f59e0b;
  --color-tcg11-accent: oklch(0.77 0.16 70);
  --color-tcg11-star-off: #94a3b8;
  --color-tcg11-star-off: oklch(0.71 0.03 257);
  --color-tcg11-featbg: #0f172a;
  --color-tcg11-featbg: oklch(0.21 0.04 260);
  --color-tcg11-featink: #f8fafc;
  --color-tcg11-featink: oklch(0.98 0.004 250);
  --color-tcg11-featdim: #a4b0c2;
  --color-tcg11-featdim: oklch(0.76 0.02 257);
  --font-tcg11-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract. */

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

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

How this works

One hero, five supports. The wall is grid grid-cols-4 [grid-auto-rows:minmax(200px,auto)]; the featured quote takes col-span-2 row-span-2 and CSS auto-placement flows the rest around the hole. Moving the anchor is moving two utilities.

The inversion is inheritance. The CSS version needed .cg-11__card--featured .cg-11__quote, … .cg-11__role, … .cg-11__role strong and three more descendant selectors. Here the card declares bg-tcg11-featbg text-tcg11-featink border-tcg11-featbg and the quote simply inherits; only the two deliberately-dimmed parts (the role line) restate a colour.

Attribution stays put. flex flex-col justify-between plus a fixed gap-4 means a one-line quote and a five-line quote both leave their avatar row on the card's bottom edge — the reason the wall reads as a grid rather than a ragged collage.

Two unwinding breakpoints. At max-[960px]: the wall is two columns and the hero becomes a full-width banner (row-span-1); at max-[560px]: everything is one column. Both are stated on the elements that change.

Make it yours

  • Move the anchor: put col-span-2 row-span-2 and the dark class group on any card in the list.
  • Retheme the stars and the accent through --color-tcg11-accent in @theme.
  • Swap gradient avatars for photos: replace the div with an <img class=&quot;w-10 h-10 rounded-full object-cover&quot;>.
  • Loosen or tighten the wall by editing the 200px row floor inside [grid-auto-rows:minmax(200px,auto)].
  • Add company logos beside the company name; the attribution row is already a flex row with a gap.

Gotchas — read before shipping

  • row-span-2 against auto rows makes the hero's height depend on its neighbours' content; the minmax(200px,auto) floor is what keeps that predictable.
  • The dark card must set border-tcg11-featbg too, or the light border token draws a visible ring around the inversion.
  • Unicode stars (&#9733; U+2605) sit on slightly different baselines per system font; tabular-nums on the rating row keeps a mixed filled/empty row from jittering.
  • A dimmed role line on the dark card needs a real colour token, not an opacity utility on the parent — opacity-* would fade the avatar and the name with it.
  • Keep the quote in a <blockquote> inside a <figure> with the attribution in <figcaption>; the visual port was the moment to fix the semantics.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Baseline Grid spans + Flexbox; Unicode stars and CSS gradients are universal. The floor quoted is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

flexboxtw ↗linear gradienttw ↗border radiustw ↗transitionstw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →