.scd-brick {
position: relative; width: 240px; height: 200px; margin: 0 auto;
cursor: pointer;
}
.scd-brick__c {
position: absolute;
width: 134px; height: 40px;
background: #f0f0e8;
color: #1a1a1a;
border-radius: 2px;
display: flex; align-items: center; gap: 10px;
padding: 0 14px;
font: 700 12px system-ui, sans-serif;
box-shadow:
inset 0 -3px 0 #1d6b3a,
inset 1px 1px 0 rgba(255,255,255,0.9),
0 4px 0 #3d3d40,
0 6px 14px -3px rgba(0,0,0,0.4);
bottom: calc(var(--i) * 36px);
left: calc(var(--i) * 26px);
z-index: var(--i);
transition: bottom .5s cubic-bezier(.3,1.2,.4,1), left .5s cubic-bezier(.3,1.2,.4,1);
}
.scd-brick__c span {
background: #1d6b3a; color: #f0f0e8;
font: 700 10px ui-monospace, monospace;
padding: 3px 6px; border-radius: 2px; letter-spacing: 0.08em;
} <div class="scd-brick scd-cycle" tabindex="0">
<div class="scd-brick__c" style="--i:0"><span>Q1</span> Plan</div>
<div class="scd-brick__c" style="--i:1"><span>Q2</span> Build</div>
<div class="scd-brick__c" style="--i:2"><span>Q3</span> Ship</div>
<div class="scd-brick__c" style="--i:3"><span>Q4</span> Scale</div>
</div>
/* Click-to-cycle the staircase: bottom brick rotates to top. */
document.querySelectorAll('.scd-brick.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