Tailwind UI Pattern Registry for humans and agents

hover stack cards depth editorial premium feature cards in Tailwind landing pages editorial article teasers with more layered hover feedback product cards that need more personality than a simple lift basic hover-lift feels too generic for hero cards cards need depth without a full 3D tilt effect want a stack reveal that still works in static Tailwind layouts

Stack Peek Card

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/stack-peek-card.json
Format
Layered hover stack
Editorial card Stack Peek Card

Reveals two backing layers, so the hover reads more like a designed stack than a plain lift.

Stage Background
Customize

Quick Start

<article class="stack-peek-card relative rounded-3xl border border-white/10 bg-slate-950/80 p-6 text-white">...</article>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
1705 bytes · 64 lines
Custom Properties
--stack-offset-x--stack-offset-y--stack-rotate-a--stack-rotate-b--stack-accent-a--stack-accent-b--stack-shadow
Classes
.stack-peek-card
hover stack cards depth editorial

A more distinctive hover treatment for Tailwind-first cards. Instead of only lifting the surface, it reveals two decorative layers behind the card, making the component feel more dimensional and editorial.

Feature card

<article class="stack-peek-card relative rounded-3xl border border-white/10 bg-slate-950/80 p-6 text-white">
  <span class="text-xs font-semibold uppercase tracking-[0.18em] text-white/50">Feature</span>
  <h3 class="mt-3 text-xl font-semibold">Layered hover feedback</h3>
  <p class="mt-2 text-sm leading-6 text-white/70">
    Great for premium cards, featured article teasers, or product showcases.
  </p>
</article>

Adjust the stack spread

<article
  class="stack-peek-card relative rounded-3xl border border-white/10 bg-slate-950/80 p-6 text-white"
  style="--stack-offset-x: 20px; --stack-offset-y: 14px; --stack-rotate-a: -6deg; --stack-rotate-b: 6deg"
>
  ...
</article>