15 Tailwind Card Grid Layouts
12 / 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 Team Directory Face Grid

A directory whose avatars break the top edge of their cards, done with the oldest trick in CSS: a negative top margin equal to half the avatar's height, over a card with matching top padding. In utilities the two numbers that must stay in sync (w-21 h-21 and -mt-12.5) finally sit on the same element.

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-05 w-full min-h-svh bg-tcg05-bg font-tcg05-sans text-tcg05-ink px-6 pt-16 pb-12" aria-label="Team directory face grid demo">
  <div class="max-w-[880px] mx-auto grid [grid-template-columns:repeat(auto-fit,minmax(200px,1fr))] gap-6 [row-gap:56px]">

    <article class="relative px-5 pt-14 pb-6 text-center rounded-2xl border border-tcg05-line bg-tcg05-card transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_16px_32px_-20px_oklch(0.3_0.02_260/0.25)] focus-within:-translate-y-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-21 h-21 -mt-12.5 mx-auto mb-3 rounded-full border-4 border-white shadow-[0_2px_8px_oklch(0_0_0/0.12)] bg-linear-[135deg,#fbbf24,#f97316]" aria-hidden="true"></div>
      <h3 class="text-base font-bold">Dana Whitfield</h3>
      <p class="mt-1 text-[.82rem] text-tcg05-muted">Head of Product Design</p>
      <div class="flex justify-center gap-2.5 mt-4">
        <a href="#dana-linkedin" aria-label="Dana Whitfield on LinkedIn" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">in</a>
        <a href="#dana-x" aria-label="Dana Whitfield on X" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">tw</a>
        <a href="#dana-github" aria-label="Dana Whitfield on GitHub" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">gh</a>
      </div>
    </article>

    <article class="relative px-5 pt-14 pb-6 text-center rounded-2xl border border-tcg05-line bg-tcg05-card transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_16px_32px_-20px_oklch(0.3_0.02_260/0.25)] focus-within:-translate-y-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-21 h-21 -mt-12.5 mx-auto mb-3 rounded-full border-4 border-white shadow-[0_2px_8px_oklch(0_0_0/0.12)] bg-linear-[135deg,#34d399,#0ea5e9]" aria-hidden="true"></div>
      <h3 class="text-base font-bold">Idris Bello</h3>
      <p class="mt-1 text-[.82rem] text-tcg05-muted">Staff Engineer</p>
      <div class="flex justify-center gap-2.5 mt-4">
        <a href="#idris-linkedin" aria-label="Idris Bello on LinkedIn" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">in</a>
        <a href="#idris-x" aria-label="Idris Bello on X" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">tw</a>
        <a href="#idris-github" aria-label="Idris Bello on GitHub" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">gh</a>
      </div>
    </article>

    <article class="relative px-5 pt-14 pb-6 text-center rounded-2xl border border-tcg05-line bg-tcg05-card transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_16px_32px_-20px_oklch(0.3_0.02_260/0.25)] focus-within:-translate-y-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-21 h-21 -mt-12.5 mx-auto mb-3 rounded-full border-4 border-white shadow-[0_2px_8px_oklch(0_0_0/0.12)] bg-linear-[135deg,#f472b6,#a855f7]" aria-hidden="true"></div>
      <h3 class="text-base font-bold">Lena Ferraro</h3>
      <p class="mt-1 text-[.82rem] text-tcg05-muted">VP of Customer Success</p>
      <div class="flex justify-center gap-2.5 mt-4">
        <a href="#lena-linkedin" aria-label="Lena Ferraro on LinkedIn" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">in</a>
        <a href="#lena-x" aria-label="Lena Ferraro on X" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">tw</a>
        <a href="#lena-github" aria-label="Lena Ferraro on GitHub" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">gh</a>
      </div>
    </article>

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

@theme {
  --color-tcg05-bg: #f3f1ee;
  --color-tcg05-bg: oklch(0.95 0.006 85);
  --color-tcg05-card: #ffffff;
  --color-tcg05-card: oklch(1 0 0);
  --color-tcg05-chip: #f3f1ee;
  --color-tcg05-chip: oklch(0.95 0.006 85);
  --color-tcg05-line: #e7e4dd;
  --color-tcg05-line: oklch(0.91 0.008 90);
  --color-tcg05-ink: #1f2937;
  --color-tcg05-ink: oklch(0.29 0.03 260);
  --color-tcg05-muted: #5b6270;
  --color-tcg05-muted: oklch(0.48 0.02 260);
  --color-tcg05-accent: #a855f7;
  --color-tcg05-accent: oklch(0.63 0.24 303);
  --font-tcg05-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-05 ::selection {
  background: #a855f7;
  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-tcg05-bg: #f3f1ee;
  --color-tcg05-bg: oklch(0.95 0.006 85);
  --color-tcg05-card: #ffffff;
  --color-tcg05-card: oklch(1 0 0);
  --color-tcg05-chip: #f3f1ee;
  --color-tcg05-chip: oklch(0.95 0.006 85);
  --color-tcg05-line: #e7e4dd;
  --color-tcg05-line: oklch(0.91 0.008 90);
  --color-tcg05-ink: #1f2937;
  --color-tcg05-ink: oklch(0.29 0.03 260);
  --color-tcg05-muted: #5b6270;
  --color-tcg05-muted: oklch(0.48 0.02 260);
  --color-tcg05-accent: #a855f7;
  --color-tcg05-accent: oklch(0.63 0.24 303);
  --font-tcg05-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-05 ::selection {
  background: #a855f7;
  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 two numbers that must agree — avatar size and negative margin — are now adjacent in one class list. That is the port's only real gain here, and on a pattern this fragile it is worth having.
  • [row-gap:56px] stays arbitrary rather than becoming gap-y-14 because the value is a clearance calculation tied to the avatar, not a rhythm choice; writing it as a raw pixel value keeps that intent visible.
  • The social spans became links with min-h-11 min-w-11 and labels. This is the one demo where the port deliberately changes the markup's semantics rather than only its styling.
  • --color-tcg05-muted was darkened from #6b7280 so the job title clears 4.5:1 against white.
  • The card's hover lift gained a focus-within: twin, so tabbing into the social row lifts the card the way hovering does.
  • No media queries: auto-fit handles the reflow, exactly as in the CSS version.
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 Team Directory Face Grid
Source: https://codefronts.com/layouts/tailwind-card-grid-layout/tailwind-team-directory-face-grid/

A directory whose avatars break the top edge of their cards, done with the oldest trick in CSS: a negative top margin equal to half the avatar's height, over a card with matching top padding. In utilities the two numbers that must stay in sync (w-21 h-21 and -mt-12.5) finally sit on the same element.
## HTML
```html
<section class="tcg-05 w-full min-h-svh bg-tcg05-bg font-tcg05-sans text-tcg05-ink px-6 pt-16 pb-12" aria-label="Team directory face grid demo">
  <div class="max-w-[880px] mx-auto grid [grid-template-columns:repeat(auto-fit,minmax(200px,1fr))] gap-6 [row-gap:56px]">

    <article class="relative px-5 pt-14 pb-6 text-center rounded-2xl border border-tcg05-line bg-tcg05-card transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_16px_32px_-20px_oklch(0.3_0.02_260/0.25)] focus-within:-translate-y-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-21 h-21 -mt-12.5 mx-auto mb-3 rounded-full border-4 border-white shadow-[0_2px_8px_oklch(0_0_0/0.12)] bg-linear-[135deg,#fbbf24,#f97316]" aria-hidden="true"></div>
      <h3 class="text-base font-bold">Dana Whitfield</h3>
      <p class="mt-1 text-[.82rem] text-tcg05-muted">Head of Product Design</p>
      <div class="flex justify-center gap-2.5 mt-4">
        <a href="#dana-linkedin" aria-label="Dana Whitfield on LinkedIn" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">in</a>
        <a href="#dana-x" aria-label="Dana Whitfield on X" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">tw</a>
        <a href="#dana-github" aria-label="Dana Whitfield on GitHub" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">gh</a>
      </div>
    </article>

    <article class="relative px-5 pt-14 pb-6 text-center rounded-2xl border border-tcg05-line bg-tcg05-card transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_16px_32px_-20px_oklch(0.3_0.02_260/0.25)] focus-within:-translate-y-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-21 h-21 -mt-12.5 mx-auto mb-3 rounded-full border-4 border-white shadow-[0_2px_8px_oklch(0_0_0/0.12)] bg-linear-[135deg,#34d399,#0ea5e9]" aria-hidden="true"></div>
      <h3 class="text-base font-bold">Idris Bello</h3>
      <p class="mt-1 text-[.82rem] text-tcg05-muted">Staff Engineer</p>
      <div class="flex justify-center gap-2.5 mt-4">
        <a href="#idris-linkedin" aria-label="Idris Bello on LinkedIn" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">in</a>
        <a href="#idris-x" aria-label="Idris Bello on X" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">tw</a>
        <a href="#idris-github" aria-label="Idris Bello on GitHub" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">gh</a>
      </div>
    </article>

    <article class="relative px-5 pt-14 pb-6 text-center rounded-2xl border border-tcg05-line bg-tcg05-card transition-[translate,box-shadow] duration-250 hover:-translate-y-[3px] hover:shadow-[0_16px_32px_-20px_oklch(0.3_0.02_260/0.25)] focus-within:-translate-y-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <div class="w-21 h-21 -mt-12.5 mx-auto mb-3 rounded-full border-4 border-white shadow-[0_2px_8px_oklch(0_0_0/0.12)] bg-linear-[135deg,#f472b6,#a855f7]" aria-hidden="true"></div>
      <h3 class="text-base font-bold">Lena Ferraro</h3>
      <p class="mt-1 text-[.82rem] text-tcg05-muted">VP of Customer Success</p>
      <div class="flex justify-center gap-2.5 mt-4">
        <a href="#lena-linkedin" aria-label="Lena Ferraro on LinkedIn" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">in</a>
        <a href="#lena-x" aria-label="Lena Ferraro on X" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">tw</a>
        <a href="#lena-github" aria-label="Lena Ferraro on GitHub" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-full bg-tcg05-chip text-tcg05-ink text-[.68rem] font-bold uppercase no-underline transition-[background,color] duration-200 hover:bg-tcg05-ink hover:text-white focus-visible:outline-2 focus-visible:outline-tcg05-accent focus-visible:outline-offset-2 motion-reduce:transition-none">gh</a>
      </div>
    </article>

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

@theme {
  --color-tcg05-bg: #f3f1ee;
  --color-tcg05-bg: oklch(0.95 0.006 85);
  --color-tcg05-card: #ffffff;
  --color-tcg05-card: oklch(1 0 0);
  --color-tcg05-chip: #f3f1ee;
  --color-tcg05-chip: oklch(0.95 0.006 85);
  --color-tcg05-line: #e7e4dd;
  --color-tcg05-line: oklch(0.91 0.008 90);
  --color-tcg05-ink: #1f2937;
  --color-tcg05-ink: oklch(0.29 0.03 260);
  --color-tcg05-muted: #5b6270;
  --color-tcg05-muted: oklch(0.48 0.02 260);
  --color-tcg05-accent: #a855f7;
  --color-tcg05-accent: oklch(0.63 0.24 303);
  --font-tcg05-sans: 'Space Grotesk', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract. */

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

.tcg-05 ::selection {
  background: #a855f7;
  color: #fff;
}
```

How this works

Two numbers, one element. The avatar is w-21 h-21 (84px) and carries -mt-12.5 (50px) — slightly more than half its height, so about 34px of it sits above the card's edge. The card reserves the room with pt-14. In the CSS version those three values lived in two rules; here two of them are on the avatar's own class list, which is where you edit them together.

The row gap is load-bearing. gap-6 for columns, row-gap-14 for rows: a protruding avatar needs clearance from the card above it when the grid wraps, and the CSS version's larger row-gap was doing exactly this. It stays explicit here.

Centring still needs a block with a width. mx-auto works because the avatar is a block-level element with an explicit w-21; make it inline and the centring silently breaks. That is unchanged from the CSS, and worth stating because the utility name gives no hint.

The social row got promoted. The original used 30px <span>s — not focusable, under the touch minimum. The port makes them <a> elements at min-h-11 min-w-11, which is the one place this demo's markup deliberately diverges from the source.

Make it yours

  • Resize the avatar by editing w-*, h-* and -mt-* together — the negative margin must stay near half the diameter.
  • Add a gradient ring by wrapping the avatar in a p-[3px] rounded-full bg-linear-[…] shell.
  • Increase row-gap-* if you enlarge the avatars, or a wrapped row will collide with the card above.
  • Retheme the secondary text with --color-tcg05-muted.
  • Add a verified badge with absolute right-0 bottom-1 inside a relative avatar wrapper.

Gotchas — read before shipping

  • The card's pt-* must be at least the avatar's radius plus the exposed amount, or the avatar overlaps the name instead of the card edge.
  • Do not put overflow-hidden on the card: it clips the protruding avatar, which is the entire effect.
  • mx-auto only centres a block-level element with an explicit width. An inline avatar drifts left with no error.
  • Too small a row-gap and a wrapped card's avatar collides with the bottom of the card above — the failure only appears at certain viewport widths, which makes it easy to miss.
  • Social affordances need to be focusable elements with 44px targets; decorative spans fail both keyboard and touch.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Negative margins and auto-fit grids are long-standing universal CSS. The floor quoted is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

border radiustw ↗box-shadowtw ↗flexboxtw ↗transitionstw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →