15 Tailwind Card Grid Layouts
07 / 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 Asymmetric Bento Box Feature Grid

A dark 4-column bento where one hero tile holds a 2×2 block and four smaller tiles flow around it, each ringed by a gradient hairline. The gradient border is the whole story of this port: two backgrounds, two clip boxes and a transparent border, expressed as one arbitrary bg-[…padding-box,…border-box] utility that reads its colour from a per-tile --glow.

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-02 w-full min-h-svh bg-tcg02-bg font-tcg02-sans text-tcg02-ink px-6 py-12" aria-label="Asymmetric bento box feature grid demo">
  <div class="max-w-[1000px] mx-auto grid grid-cols-4 max-[640px]:grid-cols-2 [grid-auto-rows:140px] gap-4.5">

    <article style="--glow:#7c6af7" class="col-span-2 row-span-2 max-[640px]:row-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.4rem] font-bold tracking-[-0.01em]">Real-Time Sync Engine</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim text-pretty">Every change propagates across devices in under 80ms with conflict-free merge resolution.</p>
    </article>

    <article style="--glow:#00d4ff" class="col-span-2 max-[640px]:col-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.05rem] font-bold tracking-[-0.01em]">Edge Caching</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim">Global CDN with smart invalidation.</p>
    </article>

    <article style="--glow:#ff6b9d" class="col-span-2 max-[640px]:col-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.05rem] font-bold tracking-[-0.01em]">Zero-Config Auth</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim">Drop-in identity, fully managed.</p>
    </article>

    <article style="--glow:#ffd166" class="col-span-2 max-[640px]:col-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.05rem] font-bold tracking-[-0.01em]">Usage Insights</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim">Live dashboards, no setup.</p>
    </article>

    <article style="--glow:#34d399" class="col-span-2 max-[640px]:col-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.05rem] font-bold tracking-[-0.01em]">Type-Safe SDKs</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim">Generated clients for every stack.</p>
    </article>

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

@theme {
  --color-tcg02-bg: #08070d;
  --color-tcg02-bg: oklch(0.13 0.01 285);
  --color-tcg02-tile: #0f0e18;
  --color-tcg02-tile: oklch(0.17 0.02 285);
  --color-tcg02-ink: #f5f5fa;
  --color-tcg02-ink: oklch(0.97 0.004 285);
  --color-tcg02-dim: #a3a3b8;
  --color-tcg02-dim: oklch(0.73 0.02 285);
  --font-tcg02-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-02 ::selection {
  background: #7c6af7;
  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-tcg02-bg: #08070d;
  --color-tcg02-bg: oklch(0.13 0.01 285);
  --color-tcg02-tile: #0f0e18;
  --color-tcg02-tile: oklch(0.17 0.02 285);
  --color-tcg02-ink: #f5f5fa;
  --color-tcg02-ink: oklch(0.97 0.004 285);
  --color-tcg02-dim: #a3a3b8;
  --color-tcg02-dim: oklch(0.73 0.02 285);
  --font-tcg02-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-02 ::selection {
  background: #7c6af7;
  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&display=swap">

What changed in the port

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

  • The gradient-ring trick ports as a single arbitrary background shorthand — the one place in this collection where bg-[…] is the wrong tool, because it only ever writes background-image. It is longer than the CSS declaration was, but it is on the tile, which means a designer changing the ring never has to find the rule that draws it.
  • The CSS version's rgba(245,245,250,.55) body copy became a solid --color-tcg02-dim token: at 55% alpha on a near-black tile the paragraph sat under 4.5:1.
  • Five --glow values stay inline, because each is read only by its own tile. Demo 14's category colours went the other way — the difference is reuse, not preference.
  • [grid-auto-rows:140px] is arbitrary rather than a token: a row height is layout, not design scale, and only this demo uses it.
  • The single media query becomes two variants on the tiles (max-[640px]:col-span-1) and one on the hero (max-[640px]:row-span-1) — the collapse is now visible on the elements that collapse.
  • Tiles became <article> elements with real headings; the icons are aria-hidden decorative squares, which is what they were in the CSS version too, just unstated.
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 Asymmetric Bento Box Feature Grid
Source: https://codefronts.com/layouts/tailwind-card-grid-layout/tailwind-asymmetric-bento-box-feature-grid/

A dark 4-column bento where one hero tile holds a 2&times;2 block and four smaller tiles flow around it, each ringed by a gradient hairline. The gradient border is the whole story of this port: two backgrounds, two clip boxes and a transparent border, expressed as one arbitrary bg-[…padding-box,…border-box] utility that reads its colour from a per-tile --glow.
## HTML
```html
<section class="tcg-02 w-full min-h-svh bg-tcg02-bg font-tcg02-sans text-tcg02-ink px-6 py-12" aria-label="Asymmetric bento box feature grid demo">
  <div class="max-w-[1000px] mx-auto grid grid-cols-4 max-[640px]:grid-cols-2 [grid-auto-rows:140px] gap-4.5">

    <article style="--glow:#7c6af7" class="col-span-2 row-span-2 max-[640px]:row-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.4rem] font-bold tracking-[-0.01em]">Real-Time Sync Engine</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim text-pretty">Every change propagates across devices in under 80ms with conflict-free merge resolution.</p>
    </article>

    <article style="--glow:#00d4ff" class="col-span-2 max-[640px]:col-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.05rem] font-bold tracking-[-0.01em]">Edge Caching</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim">Global CDN with smart invalidation.</p>
    </article>

    <article style="--glow:#ff6b9d" class="col-span-2 max-[640px]:col-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.05rem] font-bold tracking-[-0.01em]">Zero-Config Auth</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim">Drop-in identity, fully managed.</p>
    </article>

    <article style="--glow:#ffd166" class="col-span-2 max-[640px]:col-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.05rem] font-bold tracking-[-0.01em]">Usage Insights</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim">Live dashboards, no setup.</p>
    </article>

    <article style="--glow:#34d399" class="col-span-2 max-[640px]:col-span-1 flex flex-col justify-end gap-2 p-6 rounded-[20px] border border-transparent [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,linear-gradient(135deg,var(--glow),transparent_70%)_border-box] transition-[translate,box-shadow] duration-300 hover:-translate-y-[3px] hover:shadow-[0_0_0_1px_var(--glow),0_20px_40px_-20px_var(--glow)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-8.5 h-8.5 mb-1 rounded-[9px] opacity-90 bg-[var(--glow)]" aria-hidden="true"></div>
      <h3 class="text-[1.05rem] font-bold tracking-[-0.01em]">Type-Safe SDKs</h3>
      <p class="mt-0.5 text-[.82rem] leading-[1.45] text-tcg02-dim">Generated clients for every stack.</p>
    </article>

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

@theme {
  --color-tcg02-bg: #08070d;
  --color-tcg02-bg: oklch(0.13 0.01 285);
  --color-tcg02-tile: #0f0e18;
  --color-tcg02-tile: oklch(0.17 0.02 285);
  --color-tcg02-ink: #f5f5fa;
  --color-tcg02-ink: oklch(0.97 0.004 285);
  --color-tcg02-dim: #a3a3b8;
  --color-tcg02-dim: oklch(0.73 0.02 285);
  --font-tcg02-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-02 ::selection {
  background: #7c6af7;
  color: #fff;
}
```

How this works

The ring is two backgrounds and a lie about the border. The card paints its own fill clipped to the padding box, the gradient clipped to the border box, and then declares the border transparent so the gradient shows through exactly one pixel of it:

class="border border-transparent
  [background:linear-gradient(#0f0e18,#0f0e18)_padding-box,
              linear-gradient(135deg,var(--glow),transparent_70%)_border-box]"

It has to be the [background:…] arbitrary property, not a bg-[…] arbitrary value: bg-[…] compiles to background-image, and a per-layer clip box is only expressible through the shorthand. Tailwind ships bg-clip-* for a single value; a two-layer background with two clip boxes is a composition, not a token.

Fixed rows make spans honest. [grid-auto-rows:140px] means row-span-2 is exactly 280px plus a gap; with auto rows the hero's height would depend on its neighbours and the bento would breathe unpredictably as copy changes.

The glow is per-instance, so it stays inline. Five tiles, five accents, each read three times — ring, hover shadow, icon fill. Promoting them to @theme would mint five utilities nothing else in the design uses.

One breakpoint, two utilities. At max-[640px]: the grid becomes two columns, tiles become col-span-1 and the hero becomes col-span-2 row-span-1 — a banner rather than a block, stated on the hero itself.

Make it yours

  • Make the hero a full-width banner with col-span-4 row-span-1; nothing else needs to change.
  • Recolour any tile through its inline --glow — ring, hover glow and icon all follow.
  • Change the bento's density by editing grid-cols-4 and the tiles' spans together; three columns with col-span-2 tiles gives a chunkier rhythm.
  • Trade the fixed [grid-auto-rows:140px] for [grid-auto-rows:minmax(140px,auto)] if your copy length varies a lot.
  • Retheme the canvas and tile fill through --color-tcg02-bg and --color-tcg02-tile; remember the fill is also inside the ring's arbitrary value.

Gotchas — read before shipping

  • The tile fill lives inside the ring utility, as its padding-box layer. Changing --color-tcg02-tile in @theme alone will not change it — edit the arbitrary value, or read the token inside it with var().
  • border-transparent is load-bearing. Without a border there is no border box for the gradient layer to fill, and the ring silently disappears.
  • row-span-2 against auto rows is unpredictable; the fixed [grid-auto-rows:140px] is what makes the hero's block exact.
  • Arbitrary values take no spaces: each layer's clip keyword joins with an underscore (…)_padding-box), and the gradient stops likewise.
  • At two columns the hero must be re-spanned or its row-span-2 leaves a hole; max-[640px]:row-span-1 is the fix, not a media query on the grid.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

The double-background background-clip ring works in every evergreen browser; grid spans are baseline. The floor quoted is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

linear gradienttw ↗box-shadowtw ↗transitionstw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →