36 Tailwind Stacked Cards
18 / 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 File Folder Tab Stacked Cards

Manila dividers, done in utilities. The tab silhouette is [clip-path:polygon(8%_0,92%_0,100%_100%,0_100%)] — a shape with no utility and no need for one — and the same nesting trick as demo 08 retires six :nth-of-type pairings in favour of plain peer-checked:. Resting folders sit dimmed behind; the checked one comes forward at full strength.

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-18 w-full min-h-svh flex items-center justify-center px-5 py-15 font-stk18-sans bg-stk18-bg" aria-label="File folder tab stack">
  <div class="relative w-[min(420px,100%)] h-65 pt-9.5">
    <div class="contents">
      <input class="peer sr-only" type="radio" name="stk-18" id="stk-18-1" checked>
      <label class="absolute top-0 left-[calc(var(--l)*33.3%)] z-5 flex h-10.5 w-[32%] items-center justify-center pb-1.5 bg-stk18-f1 text-sm font-extrabold text-stk18-ink cursor-pointer brightness-82 transition-[filter,transform] duration-250 [clip-path:polygon(8%_0,92%_0,100%_100%,0_100%)] hover:brightness-94 peer-checked:brightness-100 peer-checked:-translate-y-1 peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-2 motion-reduce:transition-none" for="stk-18-1" style="--l:0">2024</label>
      <article class="absolute inset-x-0 top-9 z-1 h-55 rounded-[2px_8px_8px_8px] bg-stk18-f1 p-6.5 text-stk18-ink opacity-50 shadow-[0_20px_40px_-24px_rgba(0,0,0,0.7)] transition-opacity duration-300 peer-checked:z-4 peer-checked:opacity-100 motion-reduce:transition-none">
        <h3 class="m-0 mb-2.5 text-2xl font-black tracking-[-0.02em]">FY2024</h3>
        <p class="m-0 max-w-[36ch] text-[15px] leading-relaxed">Revenue $2.1M &middot; 14 clients &middot; 3 new hires. The year we found product&#8209;market fit.</p>
      </article>
    </div>
    <div class="contents">
      <input class="peer sr-only" type="radio" name="stk-18" id="stk-18-2">
      <label class="absolute top-0 left-[calc(var(--l)*33.3%)] z-5 flex h-10.5 w-[32%] items-center justify-center pb-1.5 bg-stk18-f2 text-sm font-extrabold text-stk18-ink cursor-pointer brightness-82 transition-[filter,transform] duration-250 [clip-path:polygon(8%_0,92%_0,100%_100%,0_100%)] hover:brightness-94 peer-checked:brightness-100 peer-checked:-translate-y-1 peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-2 motion-reduce:transition-none" for="stk-18-2" style="--l:1">2025</label>
      <article class="absolute inset-x-0 top-9 z-1 h-55 rounded-[2px_8px_8px_8px] bg-stk18-f2 p-6.5 text-stk18-ink opacity-50 shadow-[0_20px_40px_-24px_rgba(0,0,0,0.7)] transition-opacity duration-300 peer-checked:z-4 peer-checked:opacity-100 motion-reduce:transition-none">
        <h3 class="m-0 mb-2.5 text-2xl font-black tracking-[-0.02em]">FY2025</h3>
        <p class="m-0 max-w-[36ch] text-[15px] leading-relaxed">Revenue $5.4M &middot; 38 clients &middot; shipped the platform rewrite on time.</p>
      </article>
    </div>
    <div class="contents">
      <input class="peer sr-only" type="radio" name="stk-18" id="stk-18-3">
      <label class="absolute top-0 left-[calc(var(--l)*33.3%)] z-5 flex h-10.5 w-[32%] items-center justify-center pb-1.5 bg-stk18-f3 text-sm font-extrabold text-stk18-ink cursor-pointer brightness-82 transition-[filter,transform] duration-250 [clip-path:polygon(8%_0,92%_0,100%_100%,0_100%)] hover:brightness-94 peer-checked:brightness-100 peer-checked:-translate-y-1 peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-2 motion-reduce:transition-none" for="stk-18-3" style="--l:2">2026</label>
      <article class="absolute inset-x-0 top-9 z-1 h-55 rounded-[2px_8px_8px_8px] bg-stk18-f3 p-6.5 text-stk18-ink opacity-50 shadow-[0_20px_40px_-24px_rgba(0,0,0,0.7)] transition-opacity duration-300 peer-checked:z-4 peer-checked:opacity-100 motion-reduce:transition-none">
        <h3 class="m-0 mb-2.5 text-2xl font-black tracking-[-0.02em]">FY2026</h3>
        <p class="m-0 max-w-[36ch] text-[15px] leading-relaxed">Revenue $9.0M projected &middot; expanding to the EU &middot; Series A closed in Q1.</p>
      </article>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-stk18-bg: #2a2620;
  --color-stk18-bg: oklch(0.27 0.014 70);
  --color-stk18-ink: #2a2415;
  --color-stk18-ink: oklch(0.26 0.028 85);
  --color-stk18-f1: #e0b96a;
  --color-stk18-f1: oklch(0.80 0.11 75);
  --color-stk18-f2: #7ecaa3;
  --color-stk18-f2: oklch(0.80 0.11 155);
  --color-stk18-f3: #86c2e8;
  --color-stk18-f3: oklch(0.80 0.10 235);
  --font-stk18-sans: 'Archivo', system-ui, sans-serif;
}

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-stk18-bg: #2a2620;
  --color-stk18-bg: oklch(0.27 0.014 70);
  --color-stk18-ink: #2a2415;
  --color-stk18-ink: oklch(0.26 0.028 85);
  --color-stk18-f1: #e0b96a;
  --color-stk18-f1: oklch(0.80 0.11 75);
  --color-stk18-f2: #7ecaa3;
  --color-stk18-f2: oklch(0.80 0.11 155);
  --color-stk18-f3: #86c2e8;
  --color-stk18-f3: oklch(0.80 0.10 235);
  --font-stk18-sans: 'Archivo', system-ui, sans-serif;
}
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;75..125,900&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 divider silhouette is one arbitrary [clip-path:polygon(...)] with underscore-escaped spaces — shorter and more accurate than faking a slant with borders.
  • Six :nth-of-type pairings disappear by nesting each radio with its own tab and folder, exactly as in demo 08. When a port needs positional pairing, restructure the markup.
  • contents keeps the new wrapper out of the layout so the absolutely-positioned tabs and folders still resolve against the cabinet.
  • Colour is declared once per folder and shared by its tab, so the two cannot drift apart in a rebrand.
  • Manila fills need dark ink: the text is text-stk18-ink throughout, and only whole background folders are dimmed — never the copy you are reading.
  • The @theme block is five entries and the stylesheet has no selectors: three folders, three tabs, zero JavaScript.
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 File Folder Tab Stacked Cards
Source: https://codefronts.com/components/tailwind-stacked-cards/tailwind-file-folder-tab-stacked-cards/

Manila dividers, done in utilities. The tab silhouette is [clip-path:polygon(8%_0,92%_0,100%_100%,0_100%)] &mdash; a shape with no utility and no need for one &mdash; and the same nesting trick as demo 08 retires six :nth-of-type pairings in favour of plain peer-checked:. Resting folders sit dimmed behind; the checked one comes forward at full strength.
## HTML
```html
<section class="stk-18 w-full min-h-svh flex items-center justify-center px-5 py-15 font-stk18-sans bg-stk18-bg" aria-label="File folder tab stack">
  <div class="relative w-[min(420px,100%)] h-65 pt-9.5">
    <div class="contents">
      <input class="peer sr-only" type="radio" name="stk-18" id="stk-18-1" checked>
      <label class="absolute top-0 left-[calc(var(--l)*33.3%)] z-5 flex h-10.5 w-[32%] items-center justify-center pb-1.5 bg-stk18-f1 text-sm font-extrabold text-stk18-ink cursor-pointer brightness-82 transition-[filter,transform] duration-250 [clip-path:polygon(8%_0,92%_0,100%_100%,0_100%)] hover:brightness-94 peer-checked:brightness-100 peer-checked:-translate-y-1 peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-2 motion-reduce:transition-none" for="stk-18-1" style="--l:0">2024</label>
      <article class="absolute inset-x-0 top-9 z-1 h-55 rounded-[2px_8px_8px_8px] bg-stk18-f1 p-6.5 text-stk18-ink opacity-50 shadow-[0_20px_40px_-24px_rgba(0,0,0,0.7)] transition-opacity duration-300 peer-checked:z-4 peer-checked:opacity-100 motion-reduce:transition-none">
        <h3 class="m-0 mb-2.5 text-2xl font-black tracking-[-0.02em]">FY2024</h3>
        <p class="m-0 max-w-[36ch] text-[15px] leading-relaxed">Revenue $2.1M &middot; 14 clients &middot; 3 new hires. The year we found product&#8209;market fit.</p>
      </article>
    </div>
    <div class="contents">
      <input class="peer sr-only" type="radio" name="stk-18" id="stk-18-2">
      <label class="absolute top-0 left-[calc(var(--l)*33.3%)] z-5 flex h-10.5 w-[32%] items-center justify-center pb-1.5 bg-stk18-f2 text-sm font-extrabold text-stk18-ink cursor-pointer brightness-82 transition-[filter,transform] duration-250 [clip-path:polygon(8%_0,92%_0,100%_100%,0_100%)] hover:brightness-94 peer-checked:brightness-100 peer-checked:-translate-y-1 peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-2 motion-reduce:transition-none" for="stk-18-2" style="--l:1">2025</label>
      <article class="absolute inset-x-0 top-9 z-1 h-55 rounded-[2px_8px_8px_8px] bg-stk18-f2 p-6.5 text-stk18-ink opacity-50 shadow-[0_20px_40px_-24px_rgba(0,0,0,0.7)] transition-opacity duration-300 peer-checked:z-4 peer-checked:opacity-100 motion-reduce:transition-none">
        <h3 class="m-0 mb-2.5 text-2xl font-black tracking-[-0.02em]">FY2025</h3>
        <p class="m-0 max-w-[36ch] text-[15px] leading-relaxed">Revenue $5.4M &middot; 38 clients &middot; shipped the platform rewrite on time.</p>
      </article>
    </div>
    <div class="contents">
      <input class="peer sr-only" type="radio" name="stk-18" id="stk-18-3">
      <label class="absolute top-0 left-[calc(var(--l)*33.3%)] z-5 flex h-10.5 w-[32%] items-center justify-center pb-1.5 bg-stk18-f3 text-sm font-extrabold text-stk18-ink cursor-pointer brightness-82 transition-[filter,transform] duration-250 [clip-path:polygon(8%_0,92%_0,100%_100%,0_100%)] hover:brightness-94 peer-checked:brightness-100 peer-checked:-translate-y-1 peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-2 motion-reduce:transition-none" for="stk-18-3" style="--l:2">2026</label>
      <article class="absolute inset-x-0 top-9 z-1 h-55 rounded-[2px_8px_8px_8px] bg-stk18-f3 p-6.5 text-stk18-ink opacity-50 shadow-[0_20px_40px_-24px_rgba(0,0,0,0.7)] transition-opacity duration-300 peer-checked:z-4 peer-checked:opacity-100 motion-reduce:transition-none">
        <h3 class="m-0 mb-2.5 text-2xl font-black tracking-[-0.02em]">FY2026</h3>
        <p class="m-0 max-w-[36ch] text-[15px] leading-relaxed">Revenue $9.0M projected &middot; expanding to the EU &middot; Series A closed in Q1.</p>
      </article>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-stk18-bg: #2a2620;
  --color-stk18-bg: oklch(0.27 0.014 70);
  --color-stk18-ink: #2a2415;
  --color-stk18-ink: oklch(0.26 0.028 85);
  --color-stk18-f1: #e0b96a;
  --color-stk18-f1: oklch(0.80 0.11 75);
  --color-stk18-f2: #7ecaa3;
  --color-stk18-f2: oklch(0.80 0.11 155);
  --color-stk18-f3: #86c2e8;
  --color-stk18-f3: oklch(0.80 0.10 235);
  --font-stk18-sans: 'Archivo', system-ui, sans-serif;
}
```

How this works

The shape is a clip-path, and that is the whole tab. A manila divider is a trapezoid, and Tailwind ships no polygon scale (nor should it):

[clip-path:polygon(8%_0,92%_0,100%_100%,0_100%)]

Underscores stand in for the spaces inside the value; a literal space would end the class. The alternative — borders and pseudo-elements faking a slant — is more markup and less accurate.

Nesting beats positional selectors, again. As in demo 08, grouping each radio with its own tab and body reduces six :nth-of-type(n):checked ~ :nth-of-type(n) selectors to two variants. It is worth stating the general rule: when a CSS port needs positional pairing, restructure the markup rather than reaching for arbitrary selectors.

Contrast on a light fill. These folders are warm manila, so the body text is dark (text-stk18-ink) rather than white, and the resting opacity-50 applies to whole folders that are behind the open one — not to the text of the folder you are reading.

Make it yours

  • Reshape the tabs by editing the polygon() percentages — square dividers are polygon(0_0,100%_0,100%_100%,0_100%).
  • Add a folder by copying one block, giving it the next --l and changing the 33.3% step.
  • Recolour a folder and its tab together; both read the same token.
  • Change the resting dim with opacity-50.
  • Set the open folder with the checked attribute.

Gotchas — read before shipping

  • clip-path values need the underscore escape for every space, and the whole value must be typed closed-up otherwise.
  • Nest each radio with its tab and body. Flat lists force positional selectors that utilities cannot express.
  • Keep every tab clickable: the open folder may cover the others' bodies but never their tabs.
  • sr-only radios stay focusable and give you native arrow-key switching for free; hidden destroys it.
  • A clipped element cannot show a box-shadow on the clipped edges — put the shadow on the folder body, not the tab.
  • The tab text sits on a light fill, so it needs dark ink; white-on-manila fails contrast badly.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

clip-path: polygon() is Chrome 55+, Safari 9.1+, Firefox 54+; radio :checked sibling styling is universal. The floor is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

z index stackingtw ↗transitionstw ↗brightness filtertw ↗opacitytw ↗display contentstw ↗border radiustw ↗sr only texttw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗oklch()tw ↗

Arbitraryneeds bracket syntax

clip-pathtw ↗calctw ↗

HTML & JSno Tailwind involved

radio state machinetw ↗label input bindingMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →