36 Tailwind Stacked Cards
14 / 36

All 36 in 36 Tailwind Stacked Cards

  1. 01Tailwind Scroll-Driven Scaling Card Stack
  2. 02Tailwind Swipe Card Deck Drag to Dismiss
  3. 03Tailwind Glassmorphism Testimonial Card Stack
  4. 04Tailwind Stacked Cards Expand Accordion on Click
  5. 05Tailwind Fan Out Photo Stack on Hover
  6. 06Tailwind 3D Perspective Tilt Card Stack
  7. 07Tailwind Multi Step Form Card Stack
  8. 08Tailwind Tabbed Card Stack Bring to Front
  9. 09Tailwind Click to Front Stacked Cards Cycle
  10. 10Tailwind Classic Card Deck Stack Shadow
  11. 11Tailwind Fan Spread Hand of Cards
  12. 12Tailwind Polaroid Photo Stack Scattered Rotate
  13. 13Tailwind Staircase Offset Stacked Cards Cascade
  14. 14Tailwind Cards Spread Out Horizontally on Hover
  15. 15Tailwind Stacked Cards Lift on Hover Sibling Push
  16. 16Tailwind Accordion Stacked Cards Slide Out Menu
  17. 17Tailwind Shuffle Cards Animation Loop Deck
  18. 18Tailwind File Folder Tab Stacked Cards
  19. 19Tailwind Scattered Photos Pinch to Centre on Hover
  20. 20Tailwind Mobile Swipe Card Stack Translate3d
  21. 21Tailwind Single Accordion Card Nested Layers
  22. 22Tailwind Isometric Tower Stacked Cards 3D Column
  23. 23Tailwind 3D Flip Card Stack Reveal Back
  24. 24Tailwind Card Stack Tilt on Hover Quadrant
  25. 25Tailwind Notification Stack Pile Dismiss
  26. 26Tailwind Receipt Roll Unroll Stacked Items
  27. 27Tailwind Scratch Card Reveal Canvas Mask
  28. 28Tailwind Stacked Cards Hover Reveal Spread
  29. 29Tailwind Scroll Activated Sticky Stacking Cards
  30. 30Tailwind Stacked Testimonial Slider Radio
  31. 31Tailwind Isometric Overlapping Stacked Cards
  32. 32Tailwind Bento Grid Stacked Cards Hover Fan
  33. 33Tailwind Perspective Card Deck Depth Tunnel
  34. 34Tailwind Peel Back Corner Card Reveal
  35. 35Tailwind Timeline Stacked Milestone Cards
  36. 36Tailwind Spiral Tower Rotating Stacked Cards
Tailwind v4MIT licensed

Tailwind Cards Spread Out Horizontally on Hover

A packed avatar row that springs open the moment you point at it. The overlap is -ml-7 released to group-hover:ml-3.5, the overshoot is a named --ease-* token, and the ripple is a per-card delay-[calc(var(--i)*30ms)] — so the whole open-and-close lives in one class list rather than four rules and a delay map.

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="stk-14 w-full min-h-svh flex items-center justify-center px-5 py-15 font-stk14-sans bg-stk14-bg" aria-label="Hover-spread avatar pile">
  <div class="group flex rounded-full p-5" aria-label="Project team">
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a1 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:0" aria-label="Alex Rivera">AR</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a2 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:1" aria-label="Jon Lau">JL</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a3 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:2" aria-label="Maya Kirsh">MK</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a4 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:3" aria-label="Sasha Vidal">SV</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a5 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:4" aria-label="Tomas Nagy">TN</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-more text-[17px] font-extrabold text-stk14-moreink cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:5" aria-label="Show six more team members">+6</button>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-stk14-bg: #0f1118;
  --color-stk14-bg: oklch(0.18 0.012 275);
  --color-stk14-a1: #e8836a;
  --color-stk14-a1: oklch(0.68 0.16 20);
  --color-stk14-a2: #c9a33f;
  --color-stk14-a2: oklch(0.70 0.15 90);
  --color-stk14-a3: #48b98a;
  --color-stk14-a3: oklch(0.68 0.15 155);
  --color-stk14-a4: #5296d8;
  --color-stk14-a4: oklch(0.65 0.15 235);
  --color-stk14-a5: #a077d8;
  --color-stk14-a5: oklch(0.63 0.16 300);
  --color-stk14-more: #2a2f40;
  --color-stk14-more: oklch(0.31 0.02 275);
  --color-stk14-moreink: #c3c7de;
  --color-stk14-moreink: oklch(0.83 0.02 275);
  --font-stk14-sans: 'Archivo', system-ui, sans-serif;
  --ease-stk14: cubic-bezier(0.34, 1.56, 0.5, 1);
}

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-stk14-bg: #0f1118;
  --color-stk14-bg: oklch(0.18 0.012 275);
  --color-stk14-a1: #e8836a;
  --color-stk14-a1: oklch(0.68 0.16 20);
  --color-stk14-a2: #c9a33f;
  --color-stk14-a2: oklch(0.70 0.15 90);
  --color-stk14-a3: #48b98a;
  --color-stk14-a3: oklch(0.68 0.15 155);
  --color-stk14-a4: #5296d8;
  --color-stk14-a4: oklch(0.65 0.15 235);
  --color-stk14-a5: #a077d8;
  --color-stk14-a5: oklch(0.63 0.16 300);
  --color-stk14-more: #2a2f40;
  --color-stk14-more: oklch(0.31 0.02 275);
  --color-stk14-moreink: #c3c7de;
  --color-stk14-moreink: oklch(0.83 0.02 275);
  --font-stk14-sans: 'Archivo', system-ui, sans-serif;
  --ease-stk14: cubic-bezier(0.34, 1.56, 0.5, 1);
}
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=Archivo:wdth,wght@75..125,400;75..125,800&display=swap">

What changed in the port

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

  • The webfonts load as <link> tags in setup, not as an @import inside the stylesheet. Tailwind emits user @import rules after its own @layer blocks, and a late @import is invalid CSS — the browser drops it and the demo silently falls back to system fonts.
  • The spring lives in @theme as --ease-stk14, so ease-stk14 is a named curve rather than a cubic-bezier repeated on six elements.
  • Six transition-delay rules collapse into delay-[calc(var(--i)*30ms)] reading a per-chip index — the ramp's slope is now one number.
  • first:ml-0 has to be repeated inside the hover path (group-hover:first:ml-0), which is the utility equivalent of the CSS version's second :first-child rule and just as easy to forget.
  • Two hover scopes coexist: group-hover: opens the row, plain hover: lifts one chip. Both stay live, which is what makes the pile feel like objects.
  • group-focus-within: gives the keyboard the same open, with no extra markup — the chips are already buttons.
  • Reduced motion swaps the curve rather than the distance: motion-reduce:ease-linear motion-reduce:duration-250 keeps the spread and drops the overshoot.
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 Cards Spread Out Horizontally on Hover
Source: https://codefronts.com/components/tailwind-stacked-cards/tailwind-cards-spread-out-horizontally-on-hover/

A packed avatar row that springs open the moment you point at it. The overlap is -ml-7 released to group-hover:ml-3.5, the overshoot is a named --ease-* token, and the ripple is a per-card delay-[calc(var(--i)*30ms)] &mdash; so the whole open-and-close lives in one class list rather than four rules and a delay map.
## HTML
```html
<section class="stk-14 w-full min-h-svh flex items-center justify-center px-5 py-15 font-stk14-sans bg-stk14-bg" aria-label="Hover-spread avatar pile">
  <div class="group flex rounded-full p-5" aria-label="Project team">
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a1 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:0" aria-label="Alex Rivera">AR</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a2 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:1" aria-label="Jon Lau">JL</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a3 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:2" aria-label="Maya Kirsh">MK</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a4 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:3" aria-label="Sasha Vidal">SV</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-a5 text-[17px] font-extrabold text-white cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:4" aria-label="Tomas Nagy">TN</button>
    <button class="size-16 shrink-0 rounded-full border-[3px] border-stk14-bg bg-stk14-more text-[17px] font-extrabold text-stk14-moreink cursor-pointer -ml-7 first:ml-0 shadow-[0_8px_18px_-8px_rgba(0,0,0,0.7)] transition-[margin,transform] duration-450 ease-stk14 delay-[calc(var(--i)*30ms)] group-hover:ml-3.5 group-hover:first:ml-0 group-focus-within:ml-3.5 group-focus-within:first:ml-0 hover:z-5 hover:-translate-y-2 hover:scale-105 focus-visible:z-5 focus-visible:outline-3 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:ease-linear motion-reduce:duration-250" type="button" style="--i:5" aria-label="Show six more team members">+6</button>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-stk14-bg: #0f1118;
  --color-stk14-bg: oklch(0.18 0.012 275);
  --color-stk14-a1: #e8836a;
  --color-stk14-a1: oklch(0.68 0.16 20);
  --color-stk14-a2: #c9a33f;
  --color-stk14-a2: oklch(0.70 0.15 90);
  --color-stk14-a3: #48b98a;
  --color-stk14-a3: oklch(0.68 0.15 155);
  --color-stk14-a4: #5296d8;
  --color-stk14-a4: oklch(0.65 0.15 235);
  --color-stk14-a5: #a077d8;
  --color-stk14-a5: oklch(0.63 0.16 300);
  --color-stk14-more: #2a2f40;
  --color-stk14-more: oklch(0.31 0.02 275);
  --color-stk14-moreink: #c3c7de;
  --color-stk14-moreink: oklch(0.83 0.02 275);
  --font-stk14-sans: 'Archivo', system-ui, sans-serif;
  --ease-stk14: cubic-bezier(0.34, 1.56, 0.5, 1);
}
```

How this works

Overlap by margin, spread by variant. The pile is a flex row whose children pull left; releasing that pull is the whole animation:

class="-ml-7 first:ml-0
       group-hover:ml-3.5 group-hover:first:ml-0
       transition-[margin,transform] duration-450 ease-stk14"

Because it is flex with margins rather than absolute positioning, the row re-centres itself as it opens and needs no width maths at any breakpoint.

The bounce is a token. --ease-stk14: cubic-bezier(0.34, 1.56, 0.5, 1) in @theme gives a named ease-stk14, so the spring is declared once and every chip references the same curve. The 1.56 is the overshoot; past about 1.7 it stops reading as spring and starts reading as broken.

The ripple is arithmetic, not a list. Six :nth-child delay rules become delay-[calc(var(--i)*30ms)] with the index on the element, so the ramp is one class and its slope is one number.

Two hover scopes, deliberately. group-hover: on the row opens the pile; a plain hover: on the chip lifts just that chip. Both are live at once, which is what makes the row feel like objects rather than a widget.

Make it yours

  • Set the packed and open spacing with the two margin values — the distance between them is the whole gesture.
  • Tune the bounce through --ease-stk14; lower the third number toward 1.0 for a plain ease-out.
  • Change the ripple slope via the 30ms in the delay calc, or set it to 0ms for a single synchronised open.
  • Swap the circles for square cards by changing rounded-full and the size-16.
  • Recolour chips individually — each carries its own bg-stk14-* token, and the overflow chip has its own muted pair.

Gotchas — read before shipping

  • Keep first:ml-0 on both the resting and the hover path. Miss the hover one and the whole row shifts sideways as it opens.
  • Use flex with margins, not absolute positioning, so the row re-centres itself while it spreads.
  • Keep the overshoot subtle. A spring that overshoots too far reads as a layout bug, not as physics.
  • group-focus-within: is required for keyboard parity — a hover-only pile never opens for a tab user.
  • The border ring on each chip must match the page background (border-stk14-bg), or the packed row looks smudged rather than layered.
  • Keep chips at size-16. Overlapping circles smaller than 44px are below the touch-target minimum even before they overlap.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Flexbox, negative margins and spring easing are universal (Chrome 49+, Safari 10+, Firefox 52+). The floor is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

flexboxtw ↗negative marginstw ↗transitionstw ↗transition delaytw ↗:focus-withintw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

cubic bezier easingtw ↗custom propertiestw ↗oklch()tw ↗

Arbitraryneeds bracket syntax

calctw ↗

HTML & JSno Tailwind involved

button elementMDN ↗aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →