36 Tailwind Stacked Cards
26 / 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 Receipt Roll Unroll Stacked Items

An order summary that unrolls like till paper. The reveal is the familiar grid-rows-[0fr] → 1fr pair, but the memorable part is the perforated edge: one arbitrary [mask:radial-gradient(9px_at_50%_0,transparent_98%,#000)_repeat-x_0_0/18px_12px] cuts the zig-zag out of a plain block, and the direction arrow is a peer-checked:after:content swap rather than two rules.

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-26 w-full min-h-svh flex items-start justify-center px-5 py-[10vh] font-stk26-sans bg-stk26-desk" aria-label="Unrolling receipt">
  <div class="relative w-[min(300px,100%)] rounded-t-[4px] bg-stk26-paper pb-3.5 shadow-[0_24px_50px_-24px_rgba(0,0,0,0.6)]">
    <input class="peer sr-only" type="checkbox" id="stk-26-t" checked>
    <label class="flex cursor-pointer flex-col items-center gap-1 border-b-2 border-dashed border-stk26-dash px-4 pt-5 pb-3.5 peer-focus-visible:outline-3 peer-focus-visible:outline-stk26-ring peer-focus-visible:outline-offset-2" for="stk-26-t">
      <b class="font-stk26-mono text-[13px] font-bold tracking-[0.06em] text-stk26-ink">CODEFRONTS &middot; Order #2261</b>
      <span class="font-stk26-mono text-[11px] tracking-[0.12em] uppercase text-stk26-faint after:content-['_&#9660;'] peer-checked:after:content-['_&#9650;']">Tap to roll</span>
    </label>
    <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-550 ease-stk26 peer-checked:grid-rows-[1fr] motion-reduce:transition-none">
      <div class="overflow-hidden font-stk26-mono">
        <div class="flex justify-between px-5 py-2.25 text-[13px] text-stk26-body"><span>Stacked Cards Pack</span><span>$29.00</span></div>
        <div class="flex justify-between px-5 py-2.25 text-[13px] text-stk26-body"><span>Carousel Add-on</span><span>$14.00</span></div>
        <div class="flex justify-between px-5 py-2.25 text-[13px] text-stk26-body"><span>Lifetime updates</span><span>$12.00</span></div>
        <div class="mt-1.5 flex justify-between border-t border-dashed border-stk26-dash px-5 py-2.25 text-[13px] text-stk26-body"><span>Subtotal</span><span>$55.00</span></div>
        <div class="flex justify-between px-5 py-2.25 text-[13px] text-stk26-body"><span>Tax</span><span>$4.40</span></div>
        <div class="flex justify-between border-t-2 border-stk26-ink px-5 py-2.25 text-[15px] font-bold text-stk26-ink"><span>Total</span><span>$59.40</span></div>
        <p class="m-0 px-5 pt-3.5 pb-1.5 text-center font-stk26-mono text-xs tracking-[0.1em] text-stk26-faint">&starf; Thank you for your order &starf;</p>
      </div>
    </div>
    <span class="stk-26__perf block h-3 bg-stk26-paper [mask:radial-gradient(9px_at_50%_0,transparent_98%,#000)_repeat-x_0_0/18px_12px]" aria-hidden="true"></span>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-stk26-desk: #2b2a28;
  --color-stk26-desk: oklch(0.28 0.006 70);
  --color-stk26-paper: #fbfaf5;
  --color-stk26-paper: oklch(0.98 0.006 85);
  --color-stk26-dash: #d8d4c8;
  --color-stk26-dash: oklch(0.86 0.012 85);
  --color-stk26-ink: #2a2620;
  --color-stk26-ink: oklch(0.26 0.010 75);
  --color-stk26-body: #3a352c;
  --color-stk26-body: oklch(0.34 0.012 80);
  --color-stk26-faint: #8a8474;
  --color-stk26-faint: oklch(0.60 0.016 85);
  --color-stk26-ring: #5b78e8;
  --color-stk26-ring: oklch(0.60 0.17 262);
  --font-stk26-sans: 'Archivo', system-ui, sans-serif;
  --font-stk26-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-stk26: cubic-bezier(0.4, 0.9, 0.3, 1);
}
/* Older Safari and Chrome need the prefixed mask, and one class list cannot
   carry two declarations of the same property. */

.stk-26__perf {
  -webkit-mask: radial-gradient(9px at 50% 0, transparent 98%, #000) repeat-x 0 0 / 18px 12px;
}

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-stk26-desk: #2b2a28;
  --color-stk26-desk: oklch(0.28 0.006 70);
  --color-stk26-paper: #fbfaf5;
  --color-stk26-paper: oklch(0.98 0.006 85);
  --color-stk26-dash: #d8d4c8;
  --color-stk26-dash: oklch(0.86 0.012 85);
  --color-stk26-ink: #2a2620;
  --color-stk26-ink: oklch(0.26 0.010 75);
  --color-stk26-body: #3a352c;
  --color-stk26-body: oklch(0.34 0.012 80);
  --color-stk26-faint: #8a8474;
  --color-stk26-faint: oklch(0.60 0.016 85);
  --color-stk26-ring: #5b78e8;
  --color-stk26-ring: oklch(0.60 0.17 262);
  --font-stk26-sans: 'Archivo', system-ui, sans-serif;
  --font-stk26-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-stk26: cubic-bezier(0.4, 0.9, 0.3, 1);
}
/* Older Safari and Chrome need the prefixed mask, and one class list cannot
   carry two declarations of the same property. */

.stk-26__perf {
  -webkit-mask: radial-gradient(9px at 50% 0, transparent 98%, #000) repeat-x 0 0 / 18px 12px;
}
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&family=JetBrains+Mono:wght@400;500;700&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 perforated paper edge is one arbitrary mask with every space underscore-escaped — no SVG, no borders, no extra elements.
  • The -webkit-mask fallback is the only selector in the stylesheet, for the same reason as demo 06's mask-composite: two values of one property cannot share a class list.
  • The arrow direction swaps via after:content-['_&#9660;'] and peer-checked:after:content-['_&#9650;'] — the case where content in a utility is genuinely right, because the difference is one glyph.
  • The 0fr → 1fr grid reveal appears for the third time in the collection (04, 16, 26); it is the pattern to reach for whenever something must expand to height:auto.
  • The monospace face is a --font-* token, so the totals column is aligned by the same mechanism as any colour.
  • Every figure is real selectable text in flex rows, so the summary reads in order to a screen reader and the numbers can be copied.
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 Receipt Roll Unroll Stacked Items
Source: https://codefronts.com/components/tailwind-stacked-cards/tailwind-receipt-roll-unroll-stacked-items/

An order summary that unrolls like till paper. The reveal is the familiar grid-rows-[0fr] &rarr; 1fr pair, but the memorable part is the perforated edge: one arbitrary [mask:radial-gradient(9px_at_50%_0,transparent_98%,#000)_repeat-x_0_0/18px_12px] cuts the zig-zag out of a plain block, and the direction arrow is a peer-checked:after:content swap rather than two rules.
## HTML
```html
<section class="stk-26 w-full min-h-svh flex items-start justify-center px-5 py-[10vh] font-stk26-sans bg-stk26-desk" aria-label="Unrolling receipt">
  <div class="relative w-[min(300px,100%)] rounded-t-[4px] bg-stk26-paper pb-3.5 shadow-[0_24px_50px_-24px_rgba(0,0,0,0.6)]">
    <input class="peer sr-only" type="checkbox" id="stk-26-t" checked>
    <label class="flex cursor-pointer flex-col items-center gap-1 border-b-2 border-dashed border-stk26-dash px-4 pt-5 pb-3.5 peer-focus-visible:outline-3 peer-focus-visible:outline-stk26-ring peer-focus-visible:outline-offset-2" for="stk-26-t">
      <b class="font-stk26-mono text-[13px] font-bold tracking-[0.06em] text-stk26-ink">CODEFRONTS &middot; Order #2261</b>
      <span class="font-stk26-mono text-[11px] tracking-[0.12em] uppercase text-stk26-faint after:content-['_&#9660;'] peer-checked:after:content-['_&#9650;']">Tap to roll</span>
    </label>
    <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-550 ease-stk26 peer-checked:grid-rows-[1fr] motion-reduce:transition-none">
      <div class="overflow-hidden font-stk26-mono">
        <div class="flex justify-between px-5 py-2.25 text-[13px] text-stk26-body"><span>Stacked Cards Pack</span><span>$29.00</span></div>
        <div class="flex justify-between px-5 py-2.25 text-[13px] text-stk26-body"><span>Carousel Add-on</span><span>$14.00</span></div>
        <div class="flex justify-between px-5 py-2.25 text-[13px] text-stk26-body"><span>Lifetime updates</span><span>$12.00</span></div>
        <div class="mt-1.5 flex justify-between border-t border-dashed border-stk26-dash px-5 py-2.25 text-[13px] text-stk26-body"><span>Subtotal</span><span>$55.00</span></div>
        <div class="flex justify-between px-5 py-2.25 text-[13px] text-stk26-body"><span>Tax</span><span>$4.40</span></div>
        <div class="flex justify-between border-t-2 border-stk26-ink px-5 py-2.25 text-[15px] font-bold text-stk26-ink"><span>Total</span><span>$59.40</span></div>
        <p class="m-0 px-5 pt-3.5 pb-1.5 text-center font-stk26-mono text-xs tracking-[0.1em] text-stk26-faint">&starf; Thank you for your order &starf;</p>
      </div>
    </div>
    <span class="stk-26__perf block h-3 bg-stk26-paper [mask:radial-gradient(9px_at_50%_0,transparent_98%,#000)_repeat-x_0_0/18px_12px]" aria-hidden="true"></span>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-stk26-desk: #2b2a28;
  --color-stk26-desk: oklch(0.28 0.006 70);
  --color-stk26-paper: #fbfaf5;
  --color-stk26-paper: oklch(0.98 0.006 85);
  --color-stk26-dash: #d8d4c8;
  --color-stk26-dash: oklch(0.86 0.012 85);
  --color-stk26-ink: #2a2620;
  --color-stk26-ink: oklch(0.26 0.010 75);
  --color-stk26-body: #3a352c;
  --color-stk26-body: oklch(0.34 0.012 80);
  --color-stk26-faint: #8a8474;
  --color-stk26-faint: oklch(0.60 0.016 85);
  --color-stk26-ring: #5b78e8;
  --color-stk26-ring: oklch(0.60 0.17 262);
  --font-stk26-sans: 'Archivo', system-ui, sans-serif;
  --font-stk26-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-stk26: cubic-bezier(0.4, 0.9, 0.3, 1);
}
/* Older Safari and Chrome need the prefixed mask, and one class list cannot
   carry two declarations of the same property. */

.stk-26__perf {
  -webkit-mask: radial-gradient(9px at 50% 0, transparent 98%, #000) repeat-x 0 0 / 18px 12px;
}
```

How this works

The perforation is one mask. A row of half-circles cut out of a 12px strip, tiled every 18px:

[mask:radial-gradient(9px_at_50%_0,transparent_98%,#000)_repeat-x_0_0/18px_12px]

Every space is an underscore, including inside the repeat-x 0 0 position and the /18px 12px size. It looks dense, but it is the whole paper edge in one class — no SVG, no border tricks, no extra elements. Older Safari needs -webkit-mask, and since one class list cannot carry two declarations of the same property, that stays in the stylesheet.

Pseudo-content as a state indicator. The arrow direction is a genuine one-glyph difference, so it goes in content:

after:content-['_▼'] peer-checked:after:content-['_▲']

Two rules in the CSS version become two utilities on the element they annotate. This is the case where content in utilities is right — unlike demo 02's LIKE/NOPE stamps, which are words and belong in the DOM.

Totals are text, not pictures. The two-column rows are flex with justify-between and every figure is real text in a monospace face, so a screen reader reads the summary in order and the numbers stay selectable and copyable.

Make it yours

  • Change the unroll speed via duration-550 on the grid wrapper.
  • Deepen the perforation by editing the mask's 9px radius and 18px 12px tile.
  • Swap the paper colour and mono face through the @theme tokens; the perforation reads the same paper colour, so they cannot drift.
  • Add or remove line-item rows freely — the grid reveal does not care how many there are.
  • Start rolled up by removing checked from the input.

Gotchas — read before shipping

  • Every space inside the mask value must be an underscore, including in the position and the / size. One literal space and the class silently disappears.
  • The -webkit-mask fallback has to stay in CSS — one class list cannot hold two declarations of the same property.
  • Animate grid-template-rows, not height; and keep overflow-hidden on the body so it clips while rolled.
  • The perforation strip must be the same colour as the paper, or the cut-outs read as notches in the wrong colour.
  • Label the toggle and keep the checkbox sr-only; the whole receipt is otherwise unopenable from the keyboard.
  • content in a utility needs the quotes inside the brackets and no spaces — use _ for the leading space.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Animating grid-template-rows needs Chrome 107+, Safari 16+, Firefox 66+ and falls back to an instant reveal; CSS mask is Chrome 120+ unprefixed with the -webkit- path covering older Safari and Chrome.

Techniques used in this demo

Utilitiesfirst-class utility or variant

masktw ↗radial-gradient()tw ↗pseudo elementstw ↗content propertytw ↗border dashedtw ↗transitionstw ↗prefers-reduced-motiontw ↗sr only texttw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Arbitraryneeds bracket syntax

grid rows animationtw ↗

HTML & JSno Tailwind involved

checkbox toggletw ↗label input bindingMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →