36 Tailwind Stacked Cards
22 / 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 Isometric Tower Stacked Cards 3D Column

Five floors on a steep isometric plane, each extruded by a before: slab so the column has real thickness. The shading is the interesting port: instead of five colour tokens, each floor computes its own fill from its index inside oklch() — calc(0.78-var(--i)*0.05) in the lightness slot — so the whole tonal ramp is one expression.

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-22 w-full min-h-svh flex items-center justify-center px-5 py-[8vh] font-stk22-sans bg-stk22-bg [background-image:radial-gradient(circle_at_50%_30%,var(--color-stk22-glow),transparent_70%)]" aria-label="Isometric tower of cards">
  <div class="[perspective:1200px] has-focus-visible:outline-3 has-focus-visible:outline-stk22-ring has-focus-visible:outline-offset-[26px] has-focus-visible:rounded-lg">
    <div class="group relative w-50 h-75 outline-none [transform-style:preserve-3d] [transform:rotateX(58deg)_rotateZ(-42deg)]" tabindex="0" aria-hidden="true">
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:0">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Rooftop</b>
      </div>
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:1">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Sky lounge</b>
      </div>
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:2">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Offices</b>
      </div>
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:3">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Atrium</b>
      </div>
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:4">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Lobby</b>
      </div>
    </div>
    <p class="sr-only">Tower floors, top to bottom: Rooftop, Sky lounge, Offices, Atrium, Lobby.</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-stk22-bg: #0a0d15;
  --color-stk22-bg: oklch(0.13 0.016 265);
  --color-stk22-glow: #1a2030;
  --color-stk22-glow: oklch(0.24 0.026 265);
  --color-stk22-ring: #7fb2e8;
  --color-stk22-ring: oklch(0.70 0.12 240);
  --font-stk22-sans: 'Archivo', system-ui, sans-serif;
  --ease-stk22: cubic-bezier(0.3, 0.9, 0.3, 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-stk22-bg: #0a0d15;
  --color-stk22-bg: oklch(0.13 0.016 265);
  --color-stk22-glow: #1a2030;
  --color-stk22-glow: oklch(0.24 0.026 265);
  --color-stk22-ring: #7fb2e8;
  --color-stk22-ring: oklch(0.70 0.12 240);
  --font-stk22-sans: 'Archivo', system-ui, sans-serif;
  --ease-stk22: cubic-bezier(0.3, 0.9, 0.3, 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 tonal ramp is computed inside oklch() from the floor index, so five fills come from one arbitrary background — and because oklch lightness is perceptually uniform, the steps look even.
  • The extrusion is a before: utility chain, including its own before:[transform:translateZ(-34px)], so the slab that gives each floor thickness is declared on the floor.
  • Depth and its hover expansion are the same expression with different multipliers, exactly as in demo 10 — the index pattern again, on the Z axis.
  • [perspective:1200px] on the scene and [transform-style:preserve-3d] on the column: three arbitrary properties, all of them correct as arbitrary properties.
  • The whole scene is aria-hidden with an sr-only floor list beside it — a foreshortened 3D diagram is a picture of information, not the information.
  • The focus ring lives on a wrapper outside the 3D context; inside it, an outline would be rotated and squashed with the tower.
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 Isometric Tower Stacked Cards 3D Column
Source: https://codefronts.com/components/tailwind-stacked-cards/tailwind-isometric-tower-stacked-cards-3d-column/

Five floors on a steep isometric plane, each extruded by a before: slab so the column has real thickness. The shading is the interesting port: instead of five colour tokens, each floor computes its own fill from its index inside oklch() &mdash; calc(0.78-var(--i)*0.05) in the lightness slot &mdash; so the whole tonal ramp is one expression.
## HTML
```html
<section class="stk-22 w-full min-h-svh flex items-center justify-center px-5 py-[8vh] font-stk22-sans bg-stk22-bg [background-image:radial-gradient(circle_at_50%_30%,var(--color-stk22-glow),transparent_70%)]" aria-label="Isometric tower of cards">
  <div class="[perspective:1200px] has-focus-visible:outline-3 has-focus-visible:outline-stk22-ring has-focus-visible:outline-offset-[26px] has-focus-visible:rounded-lg">
    <div class="group relative w-50 h-75 outline-none [transform-style:preserve-3d] [transform:rotateX(58deg)_rotateZ(-42deg)]" tabindex="0" aria-hidden="true">
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:0">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Rooftop</b>
      </div>
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:1">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Sky lounge</b>
      </div>
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:2">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Offices</b>
      </div>
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:3">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Atrium</b>
      </div>
      <div class="absolute left-0 top-0 flex size-45 items-center justify-center rounded-[10px] p-3.5 shadow-[0_20px_30px_-16px_rgba(0,0,0,0.6)] [background-image:linear-gradient(160deg,oklch(calc(0.78-var(--i)*0.05)_0.09_240),oklch(calc(0.64-var(--i)*0.05)_0.11_250))] [transform:translateZ(calc(var(--i)*34px))] before:absolute before:left-0 before:bottom-0 before:h-8.5 before:w-full before:rounded-b-[10px] before:[background:oklch(calc(0.5-var(--i)*0.04)_0.1_250)] before:[transform:translateZ(-34px)] transition-transform duration-500 ease-stk22 group-hover:[transform:translateZ(calc(var(--i)*60px+10px))] group-focus-visible:[transform:translateZ(calc(var(--i)*60px+10px))] motion-reduce:transition-none" style="--i:4">
        <b class="text-center text-[15px] font-extrabold tracking-[0.02em] text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.45)]">Lobby</b>
      </div>
    </div>
    <p class="sr-only">Tower floors, top to bottom: Rooftop, Sky lounge, Offices, Atrium, Lobby.</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-stk22-bg: #0a0d15;
  --color-stk22-bg: oklch(0.13 0.016 265);
  --color-stk22-glow: #1a2030;
  --color-stk22-glow: oklch(0.24 0.026 265);
  --color-stk22-ring: #7fb2e8;
  --color-stk22-ring: oklch(0.70 0.12 240);
  --font-stk22-sans: 'Archivo', system-ui, sans-serif;
  --ease-stk22: cubic-bezier(0.3, 0.9, 0.3, 1);
}
```

How this works

The tonal ramp is arithmetic in the colour function. Five floors need five fills, and the CSS version writes them as one gradient per floor with the index in the lightness channel. Utilities can do the same thing, once:

[background-image:linear-gradient(160deg,
  oklch(calc(0.78-var(--i)*0.05)_0.09_240),
  oklch(calc(0.64-var(--i)*0.05)_0.11_250))]

This is why oklch() matters beyond taste: because its lightness channel is perceptually uniform, subtracting a constant per floor gives visually even steps. Doing the same in hsl() produces a ramp that looks bunched at one end.

Perspective on the parent, always. [perspective:1200px] on the scene; [transform-style:preserve-3d] plus the isometric rotation on the column. The same rule as demo 06, and the same failure mode if you swap them.

Thickness comes from a pseudo-element. Each floor's before: slab sits at translateZ(-34px) — exactly the floor spacing — so the gap between floors is filled and the column reads as solid rather than as five hovering plates.

Decorative 3D needs a text equivalent. The scene is aria-hidden and a plain sr-only list names the floors in order. A rotated, foreshortened diagram is a picture of information; the information itself should also exist as text.

Make it yours

  • Change the tower's angle via the shared rotateX(58deg)_rotateZ(-42deg).
  • Set floor spacing with the 34px in the translate and match the extrusion slab's -34px and height.
  • Steepen the tonal ramp by changing the 0.05 lightness step.
  • Widen the hover separation with the 60px multiplier.
  • Add a floor with the next --i; the fill and depth both follow from it.

Gotchas — read before shipping

  • perspective belongs on the parent scene. On the rotating column it flattens the 3D into a 2D skew.
  • The extrusion slab's translateZ must equal the floor spacing, or you get either gaps or overlap.
  • Order the floors so overlaps paint correctly; in a preserve-3d context source order still breaks ties between coplanar surfaces.
  • Give the scene vertical room. A rotated column is taller than its unrotated box and clips silently.
  • Put the focus ring outside the 3D context; inside it, an outline is rotated and foreshortened along with everything else.
  • Mark the scene aria-hidden and provide the floor names as text. A 3D diagram is not a substitute for content.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

3D transforms and preserve-3d are broadly supported (Chrome 36+, Safari 9+, Firefox 16+); oklch() needs Chrome 111+, Safari 15.4+, Firefox 113+, which is inside Tailwind v4's own floor anyway.

Techniques used in this demo

Utilitiesfirst-class utility or variant

3d transformstw ↗perspectivetw ↗preserve 3dtw ↗pseudo elementstw ↗linear gradienttw ↗radial-gradient()tw ↗transitionstw ↗text shadowtw ↗prefers-reduced-motiontw ↗sr only texttw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗oklch()tw ↗

Arbitraryneeds bracket syntax

calctw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗tabindexMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →