4 Tailwind2 with JSPublished 2026-10-05Free · no sign-up
Six stacking patterns in Tailwind: a card pile that fans out on hover, notifications that collapse into a stack, a deck that cycles with a Next button, cards that pile up as you scroll, a stack of folders and overlapping avatars.
A collection card with two coloured cards peeking out behind it at angles. On hover the back cards fan out sideways with group-hover translate and rotate utilities, hinting that there is more inside.
Notifications collapse into a neat stack with only the edges of older ones showing, then spread into a list when expanded. A data attribute drives group-data-[open] utilities, and collapsed cards are made inert so they cannot be reached until shown.
var b = document.getElementById('twsk2b'), l = document.getElementById('twsk2l'), rest = [].slice.call(l.children, 1);
function set(open) { b.setAttribute('aria-expanded', open); b.textContent = open ? 'Show less' : 'Show all 3 notifications'; if (open) l.dataset.open = ''; else delete l.dataset.open; rest.forEach(function (li) { li.inert = !open; }); }
b.onclick = function () { set(b.getAttribute('aria-expanded') !== 'true'); };
set(false);
03. Tailwind Card Deck with Next Button
TailwindStackJS
A deck of destination cards where Next sends the top card to the back and the rest move forward. Each card's offset and scale come from its position in the list, only the top card is reachable, and a status line announces the new card.
var list = document.getElementById('twsk3'), s = document.getElementById('twsk3s');
function lay() { [].forEach.call(list.children, function (c, i) { c.style.transform = 'translateY(' + i * 12 + 'px) scale(' + (1 - i * .06) + ')'; c.style.zIndex = 10 - i; c.style.opacity = i > 2 ? 0 : 1; c.inert = i > 0; }); }
document.getElementById('twsk3n').onclick = function () { list.appendChild(list.firstElementChild); lay(); s.textContent = list.firstElementChild.querySelector('h3').textContent; };
lay();
04. Tailwind Sticky Stacking Cards
TailwindStackSticky
Cards that pile up as you scroll: each one is sticky with a slightly larger top offset, so it stops just below the previous card. The scroll area is a labelled region that can take keyboard focus, so it can be scrolled without a mouse.
Three folders stacked one in front of the other, each with a tab at a different position so all the labels stay visible. Only absolute positioning and inset utilities are needed; the front folder holds the details.
Overlapping avatar circles with negative space-x and a white ring separating them, ending in a +5 counter. Hovering an avatar lifts it above its neighbours, and the sentence beside the group gives the total in words.