.scd-swipe { position: relative; width: 220px; height: 170px; margin: 0 auto; }
.scd-swipe > input { display: none; }
.scd-swipe__c {
position: absolute; left: 50%; top: 50%;
width: 184px; height: 124px; margin: -62px 0 0 -92px;
background: #0c2340;
color: #fdf6e9;
border-left: 6px solid #e84a8a;
border-radius: 4px;
padding: 18px 20px;
cursor: pointer;
display: flex; flex-direction: column; justify-content: space-between;
box-shadow: 0 8px 22px -8px rgba(12,35,64,0.55);
transform: translateY(calc(var(--i) * -10px)) scale(calc(1 - var(--i) * 0.05));
transition: transform .5s cubic-bezier(.3,1,.3,1), opacity .4s;
z-index: calc(10 - var(--i));
}
.scd-swipe__hd {
font: 800 16px/1 ui-monospace, monospace;
letter-spacing: 0.06em;
}
.scd-swipe__ft {
font: 700 10px/1 ui-monospace, monospace;
color: #e84a8a; letter-spacing: 0.18em;
border-top: 1px dashed rgba(253,246,233,0.3);
padding-top: 8px;
}
#scd-swipe-1:checked ~ [data-card="1"] { transform: translate(180%, -30px) rotate(20deg); opacity: 0; }
#scd-swipe-2:checked ~ [data-card="2"] { transform: translate(-180%, -30px) rotate(-20deg); opacity: 0; } <div class="scd-swipe">
<input type="checkbox" id="scd-swipe-1">
<input type="checkbox" id="scd-swipe-2">
<div class="scd-swipe__c" style="--i:2"><span class="scd-swipe__hd">SFO → JFK</span><span class="scd-swipe__ft">UA · 423</span></div>
<label for="scd-swipe-2" class="scd-swipe__c" data-card="2" style="--i:1"><span class="scd-swipe__hd">LHR → CDG</span><span class="scd-swipe__ft">BA · 304</span></label>
<label for="scd-swipe-1" class="scd-swipe__c" data-card="1" style="--i:0"><span class="scd-swipe__hd">NRT → SIN</span><span class="scd-swipe__ft">JL · 711</span></label>
</div>
/* Auto-reset the swipe stack 1.5s after a card is dismissed
so the demo loops continuously. */
document.querySelectorAll('.scd-swipe').forEach(function(stack) {
var inputs = stack.querySelectorAll('input[type="checkbox"]');
inputs.forEach(function(input) {
input.addEventListener('change', function() {
if (input.checked) {
setTimeout(function() { input.checked = false; }, 1500);
}
});
});
}); Live preview Edit any tab — preview updates live Ready