.scd-deck {
position: relative; width: 220px; height: 150px; margin: 0 auto;
cursor: pointer;
}
.scd-deck__c {
position: absolute; inset: 0;
background: #f4ead0;
color: #0a0a0a;
border: 2px solid #0a0a0a;
border-radius: 4px; padding: 14px 16px;
box-shadow: 6px 6px 0 #0a0a0a;
transform: translate(calc(var(--i) * -10px), calc(var(--i) * -10px));
z-index: calc(10 - var(--i));
transition: transform .45s cubic-bezier(.3,1.2,.4,1), z-index 0s .22s;
}
.scd-deck__c:nth-child(1) { background: #ee3333; color: #f4ead0; }
.scd-deck__c:nth-child(2) { background: #f4ead0; }
.scd-deck__c:nth-child(3) { background: #1a1a1a; color: #f4ead0; }
.scd-deck__tag { font: 700 9px/1 ui-monospace, monospace; letter-spacing: 0.18em; opacity: 0.7; }
.scd-deck__c h4 { margin: 6px 0 4px; font: 900 18px/1 system-ui, sans-serif; letter-spacing: -0.02em; }
.scd-deck__c p { margin: 0; font: 12px/1 system-ui, sans-serif; opacity: 0.78; } <div class="scd-deck scd-cycle" tabindex="0">
<div class="scd-deck__c" style="--i:2"><span class="scd-deck__tag">MEMO 03</span><h4>Notes</h4><p>3 items</p></div>
<div class="scd-deck__c" style="--i:1"><span class="scd-deck__tag">MEMO 02</span><h4>Tasks</h4><p>7 items</p></div>
<div class="scd-deck__c" style="--i:0"><span class="scd-deck__tag">MEMO 01</span><h4>Inbox</h4><p>12 messages</p></div>
</div>
/* Click-to-cycle: send the front card to the back of the deck. */
document.querySelectorAll('.scd-cycle').forEach(function(stack) {
stack.addEventListener('click', function() {
var cards = Array.from(stack.children);
var max = cards.length - 1;
cards.forEach(function(card) {
var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
var next = current === 0 ? max : current - 1;
card.style.setProperty('--i', next);
});
});
}); Live preview Edit any tab — preview updates live Ready