36 Tailwind Stacked Cards
03 / 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 Glassmorphism Testimonial Card Stack

A frosted pile over a slowly drifting gradient. backdrop-blur-[16px] backdrop-saturate-150 is one of the few places Tailwind's utility is genuinely nicer than the property — the -webkit- prefix ships automatically. The resting scatter rides each card as --x/--y/--r, and the spread is a group-hover: / group-focus-within: pair of arbitrary transforms, so the whole choreography sits on the three cards instead of in six selectors.

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-03 w-full min-h-svh flex items-center justify-center px-5 py-15 font-stk03-sans bg-linear-[125deg,var(--color-stk03-g1),var(--color-stk03-g2),var(--color-stk03-g3)] bg-[size:220%_220%] animate-stk03-flow motion-reduce:animate-none" aria-label="Glassmorphic testimonial stack">
  <div class="group relative w-[min(360px,100%)] h-75">
    <figure class="absolute inset-0 z-3 flex flex-col justify-between p-[26px_24px] rounded-[22px] bg-white/16 backdrop-blur-[16px] backdrop-saturate-150 ring-1 ring-inset ring-white/40 shadow-[0_20px_45px_-22px_rgba(20,10,50,0.5)] text-white [transform:translate(var(--x),var(--y))_rotate(var(--r))] transition-[transform,box-shadow] duration-500 ease-stk03 group-hover:[transform:translate(0,-14px)_rotate(0deg)] group-focus-within:[transform:translate(0,-14px)_rotate(0deg)] group-hover:shadow-[0_34px_60px_-26px_rgba(20,10,50,0.7)] motion-reduce:duration-200" style="--x:0px;--y:0px;--r:0deg">
      <blockquote class="m-0 text-[17px] font-semibold leading-snug [text-shadow:0_1px_12px_rgba(30,10,60,0.35)]">&ldquo;This shipped our redesign a full sprint early. The polish is unreal.&rdquo;</blockquote>
      <figcaption class="flex items-center gap-3 text-[13px]">
        <span class="grid place-items-center size-9.5 shrink-0 rounded-full bg-stk03-av1 text-[13px] font-bold text-white ring-1 ring-inset ring-white/50">MK</span>
        <span><b class="block font-bold">Maya K.</b><a class="text-white/85 underline decoration-white/40 decoration-1 underline-offset-2 text-xs hover:text-white hover:decoration-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 rounded-xs" href="#">Head of Design, Northwind</a></span>
      </figcaption>
    </figure>
    <figure class="absolute inset-0 z-2 flex flex-col justify-between p-[26px_24px] rounded-[22px] bg-white/16 backdrop-blur-[16px] backdrop-saturate-150 ring-1 ring-inset ring-white/40 shadow-[0_20px_45px_-22px_rgba(20,10,50,0.5)] text-white [transform:translate(var(--x),var(--y))_rotate(var(--r))] transition-transform duration-500 ease-stk03 group-hover:[transform:translate(46px,30px)_rotate(7deg)] group-focus-within:[transform:translate(46px,30px)_rotate(7deg)] motion-reduce:duration-200" style="--x:22px;--y:14px;--r:4deg">
      <blockquote class="m-0 text-[17px] font-semibold leading-snug [text-shadow:0_1px_12px_rgba(30,10,60,0.35)]">&ldquo;Dependency-free and gorgeous. Our Lighthouse score didn&rsquo;t budge.&rdquo;</blockquote>
      <figcaption class="flex items-center gap-3 text-[13px]">
        <span class="grid place-items-center size-9.5 shrink-0 rounded-full bg-stk03-av2 text-[13px] font-bold text-white ring-1 ring-inset ring-white/50">JL</span>
        <span><b class="block font-bold">Jon L.</b><a class="text-white/85 underline decoration-white/40 decoration-1 underline-offset-2 text-xs hover:text-white hover:decoration-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 rounded-xs" href="#">Staff Engineer, Fathom</a></span>
      </figcaption>
    </figure>
    <figure class="absolute inset-0 z-1 flex flex-col justify-between p-[26px_24px] rounded-[22px] bg-white/16 backdrop-blur-[16px] backdrop-saturate-150 ring-1 ring-inset ring-white/40 shadow-[0_20px_45px_-22px_rgba(20,10,50,0.5)] text-white [transform:translate(var(--x),var(--y))_rotate(var(--r))] transition-transform duration-500 ease-stk03 group-hover:[transform:translate(-44px,44px)_rotate(-8deg)] group-focus-within:[transform:translate(-44px,44px)_rotate(-8deg)] motion-reduce:duration-200" style="--x:-20px;--y:26px;--r:-5deg">
      <blockquote class="m-0 text-[17px] font-semibold leading-snug [text-shadow:0_1px_12px_rgba(30,10,60,0.35)]">&ldquo;Clients think we hired a motion studio. It&rsquo;s one stylesheet.&rdquo;</blockquote>
      <figcaption class="flex items-center gap-3 text-[13px]">
        <span class="grid place-items-center size-9.5 shrink-0 rounded-full bg-stk03-av3 text-[13px] font-bold text-white ring-1 ring-inset ring-white/50">RA</span>
        <span><b class="block font-bold">Reese A.</b><a class="text-white/85 underline decoration-white/40 decoration-1 underline-offset-2 text-xs hover:text-white hover:decoration-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 rounded-xs" href="#">Founder, Studio Arc</a></span>
      </figcaption>
    </figure>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-stk03-g1: #a259d9;
  --color-stk03-g1: oklch(0.60 0.20 300);
  --color-stk03-g2: #34a8e0;
  --color-stk03-g2: oklch(0.68 0.19 210);
  --color-stk03-g3: #f0894a;
  --color-stk03-g3: oklch(0.72 0.18 30);
  --color-stk03-av1: #ef7a63;
  --color-stk03-av1: oklch(0.70 0.18 20);
  --color-stk03-av2: #3fa9dc;
  --color-stk03-av2: oklch(0.70 0.16 200);
  --color-stk03-av3: #4cc48a;
  --color-stk03-av3: oklch(0.72 0.16 140);
  --font-stk03-sans: 'Archivo', system-ui, sans-serif;
  --ease-stk03: cubic-bezier(0.2, 0.8, 0.2, 1);
  --animate-stk03-flow: stk-03-flow 16s ease-in-out infinite;
}
/* The gradient drift: keyframes have no utility form. Everything else in this
   demo — including the -webkit-backdrop-filter twin — the compiler emits. */

@keyframes stk-03-flow {
  0%,
    100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

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-stk03-g1: #a259d9;
  --color-stk03-g1: oklch(0.60 0.20 300);
  --color-stk03-g2: #34a8e0;
  --color-stk03-g2: oklch(0.68 0.19 210);
  --color-stk03-g3: #f0894a;
  --color-stk03-g3: oklch(0.72 0.18 30);
  --color-stk03-av1: #ef7a63;
  --color-stk03-av1: oklch(0.70 0.18 20);
  --color-stk03-av2: #3fa9dc;
  --color-stk03-av2: oklch(0.70 0.16 200);
  --color-stk03-av3: #4cc48a;
  --color-stk03-av3: oklch(0.72 0.16 140);
  --font-stk03-sans: 'Archivo', system-ui, sans-serif;
  --ease-stk03: cubic-bezier(0.2, 0.8, 0.2, 1);
  --animate-stk03-flow: stk-03-flow 16s ease-in-out infinite;
}
/* The gradient drift: keyframes have no utility form. Everything else in this
   demo — including the -webkit-backdrop-filter twin — the compiler emits. */

@keyframes stk-03-flow {
  0%,
    100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}
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,600;75..125,700&family=JetBrains+Mono:wght@400;500&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.
  • backdrop-blur-[16px] backdrop-saturate-150 compose into one backdrop-filter and the -webkit- prefix arrives free — the rare case where the utility is less error-prone than the property.
  • The border-plus-inset-shadow rim becomes ring-1 ring-inset ring-white/40, one utility instead of two declarations.
  • Six :hover .card:nth-child(n) rules collapse into per-card group-hover:[transform:…], with the resting position on the same element as --x/--y/--r.
  • group-focus-within: replaces the pile's :focus-visible: because each quote now carries a real focusable citation link, the pile opens for keyboard users without needing tabindex on a <div>.
  • The stylesheet keeps only the gradient @keyframes; the 16-second timing lives in the --animate-* token so the root needs one class.
  • Reduced motion is two variants rather than a media block: motion-reduce:animate-none freezes the gradient and motion-reduce:duration-200 shortens the lift.
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 Glassmorphism Testimonial Card Stack
Source: https://codefronts.com/components/tailwind-stacked-cards/tailwind-glassmorphism-testimonial-card-stack/

A frosted pile over a slowly drifting gradient. backdrop-blur-[16px] backdrop-saturate-150 is one of the few places Tailwind's utility is genuinely nicer than the property &mdash; the -webkit- prefix ships automatically. The resting scatter rides each card as --x/--y/--r, and the spread is a group-hover: / group-focus-within: pair of arbitrary transforms, so the whole choreography sits on the three cards instead of in six selectors.
## HTML
```html
<section class="stk-03 w-full min-h-svh flex items-center justify-center px-5 py-15 font-stk03-sans bg-linear-[125deg,var(--color-stk03-g1),var(--color-stk03-g2),var(--color-stk03-g3)] bg-[size:220%_220%] animate-stk03-flow motion-reduce:animate-none" aria-label="Glassmorphic testimonial stack">
  <div class="group relative w-[min(360px,100%)] h-75">
    <figure class="absolute inset-0 z-3 flex flex-col justify-between p-[26px_24px] rounded-[22px] bg-white/16 backdrop-blur-[16px] backdrop-saturate-150 ring-1 ring-inset ring-white/40 shadow-[0_20px_45px_-22px_rgba(20,10,50,0.5)] text-white [transform:translate(var(--x),var(--y))_rotate(var(--r))] transition-[transform,box-shadow] duration-500 ease-stk03 group-hover:[transform:translate(0,-14px)_rotate(0deg)] group-focus-within:[transform:translate(0,-14px)_rotate(0deg)] group-hover:shadow-[0_34px_60px_-26px_rgba(20,10,50,0.7)] motion-reduce:duration-200" style="--x:0px;--y:0px;--r:0deg">
      <blockquote class="m-0 text-[17px] font-semibold leading-snug [text-shadow:0_1px_12px_rgba(30,10,60,0.35)]">&ldquo;This shipped our redesign a full sprint early. The polish is unreal.&rdquo;</blockquote>
      <figcaption class="flex items-center gap-3 text-[13px]">
        <span class="grid place-items-center size-9.5 shrink-0 rounded-full bg-stk03-av1 text-[13px] font-bold text-white ring-1 ring-inset ring-white/50">MK</span>
        <span><b class="block font-bold">Maya K.</b><a class="text-white/85 underline decoration-white/40 decoration-1 underline-offset-2 text-xs hover:text-white hover:decoration-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 rounded-xs" href="#">Head of Design, Northwind</a></span>
      </figcaption>
    </figure>
    <figure class="absolute inset-0 z-2 flex flex-col justify-between p-[26px_24px] rounded-[22px] bg-white/16 backdrop-blur-[16px] backdrop-saturate-150 ring-1 ring-inset ring-white/40 shadow-[0_20px_45px_-22px_rgba(20,10,50,0.5)] text-white [transform:translate(var(--x),var(--y))_rotate(var(--r))] transition-transform duration-500 ease-stk03 group-hover:[transform:translate(46px,30px)_rotate(7deg)] group-focus-within:[transform:translate(46px,30px)_rotate(7deg)] motion-reduce:duration-200" style="--x:22px;--y:14px;--r:4deg">
      <blockquote class="m-0 text-[17px] font-semibold leading-snug [text-shadow:0_1px_12px_rgba(30,10,60,0.35)]">&ldquo;Dependency-free and gorgeous. Our Lighthouse score didn&rsquo;t budge.&rdquo;</blockquote>
      <figcaption class="flex items-center gap-3 text-[13px]">
        <span class="grid place-items-center size-9.5 shrink-0 rounded-full bg-stk03-av2 text-[13px] font-bold text-white ring-1 ring-inset ring-white/50">JL</span>
        <span><b class="block font-bold">Jon L.</b><a class="text-white/85 underline decoration-white/40 decoration-1 underline-offset-2 text-xs hover:text-white hover:decoration-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 rounded-xs" href="#">Staff Engineer, Fathom</a></span>
      </figcaption>
    </figure>
    <figure class="absolute inset-0 z-1 flex flex-col justify-between p-[26px_24px] rounded-[22px] bg-white/16 backdrop-blur-[16px] backdrop-saturate-150 ring-1 ring-inset ring-white/40 shadow-[0_20px_45px_-22px_rgba(20,10,50,0.5)] text-white [transform:translate(var(--x),var(--y))_rotate(var(--r))] transition-transform duration-500 ease-stk03 group-hover:[transform:translate(-44px,44px)_rotate(-8deg)] group-focus-within:[transform:translate(-44px,44px)_rotate(-8deg)] motion-reduce:duration-200" style="--x:-20px;--y:26px;--r:-5deg">
      <blockquote class="m-0 text-[17px] font-semibold leading-snug [text-shadow:0_1px_12px_rgba(30,10,60,0.35)]">&ldquo;Clients think we hired a motion studio. It&rsquo;s one stylesheet.&rdquo;</blockquote>
      <figcaption class="flex items-center gap-3 text-[13px]">
        <span class="grid place-items-center size-9.5 shrink-0 rounded-full bg-stk03-av3 text-[13px] font-bold text-white ring-1 ring-inset ring-white/50">RA</span>
        <span><b class="block font-bold">Reese A.</b><a class="text-white/85 underline decoration-white/40 decoration-1 underline-offset-2 text-xs hover:text-white hover:decoration-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 rounded-xs" href="#">Founder, Studio Arc</a></span>
      </figcaption>
    </figure>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-stk03-g1: #a259d9;
  --color-stk03-g1: oklch(0.60 0.20 300);
  --color-stk03-g2: #34a8e0;
  --color-stk03-g2: oklch(0.68 0.19 210);
  --color-stk03-g3: #f0894a;
  --color-stk03-g3: oklch(0.72 0.18 30);
  --color-stk03-av1: #ef7a63;
  --color-stk03-av1: oklch(0.70 0.18 20);
  --color-stk03-av2: #3fa9dc;
  --color-stk03-av2: oklch(0.70 0.16 200);
  --color-stk03-av3: #4cc48a;
  --color-stk03-av3: oklch(0.72 0.16 140);
  --font-stk03-sans: 'Archivo', system-ui, sans-serif;
  --ease-stk03: cubic-bezier(0.2, 0.8, 0.2, 1);
  --animate-stk03-flow: stk-03-flow 16s ease-in-out infinite;
}
/* The gradient drift: keyframes have no utility form. Everything else in this
   demo — including the -webkit-backdrop-filter twin — the compiler emits. */

@keyframes stk-03-flow {
  0%,
    100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}
```

How this works

The glass is the easy part. backdrop-blur-* and backdrop-saturate-* compose into a single backdrop-filter, and the compiler emits the -webkit- twin that older Safari needs — a line you have to remember by hand in plain CSS. What you must still get right is the layer underneath: bg-white/16, not a solid fill, or there is nothing for the blur to sample.

The scatter is data; the spread is a variant. Each card declares where it rests and the utility reads it:

<figure style="--x:22px;--y:14px;--r:4deg"
  class="[transform:translate(var(--x),var(--y))_rotate(var(--r))]
         group-hover:[transform:translate(46px,30px)_rotate(7deg)]">

Rest and hover sit two classes apart, which makes the choreography reviewable in a way six scattered :nth-child rules are not.

group-focus-within: is the accessible half of group-hover:. The CSS version reaches for :focus-visible on the pile, which only fires if the pile itself is focusable. Because each quote here carries a real focusable citation link, group-focus-within: is the truer variant: the pile opens when a keyboard user arrives anywhere inside it.

Contrast over glass needs deliberate care. Frosted panels lower effective contrast, and a drifting gradient means the number changes as it moves. Text stays at full opacity with a soft shadow rather than being dimmed to fit the aesthetic.

Make it yours

  • Dial the frost with backdrop-blur-[16px] and the bg-white/16 alpha; they move in opposite directions — more blur wants less white.
  • Change the resting spread through each card's --x / --y / --r, all three visible on the element.
  • Retarget the hover fan by editing the per-card group-hover:[transform:…]; no shared rule to keep in sync.
  • Swap the gradient stops for your brand palette in the root's bg-linear-[125deg,…].
  • Add a card by copying one <figure>, giving it a resting scatter and a hover destination — unlike the CSS version there is no :nth-child map to extend.

Gotchas — read before shipping

  • backdrop-blur needs something translucent above it. A solid bg-* utility hides the effect completely — use an opacity modifier.
  • Keep the ring-1 ring-inset ring-white/40 rim. Flat glass with no hairline reads as cheap grey, whatever the blur radius.
  • Text over glass must stay at full opacity. Dimming it to text-white/70 looks right in a screenshot and fails AA in motion.
  • animate-stk03-flow needs a bg-[size:220%_220%] to have room to travel; without an oversized background the position animation does nothing.
  • Arbitrary transforms cannot contain spaces — [transform:translate(46px,30px)_rotate(7deg)] uses the underscore escape between functions.
  • backdrop-filter forces a new stacking and containing context. Anything you expect to escape the card (a tooltip, a wide glow) will be clipped by it.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is Chrome 76+, Safari 9+ with the -webkit- prefix Tailwind emits for you, Firefox 103+. The effective floor is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗linear gradienttw ↗transformstw ↗transitionstw ↗text shadowtw ↗:focus-withintw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗oklch()tw ↗

Arbitraryneeds bracket syntax

box shadow layeringtw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

HTML & JSno Tailwind involved

semantic figureMDN ↗anchor elementMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →