Back to CSS Stacked Cards Receipt Roll Pure CSS
Share
.scd-rcpt {
  width: 192px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
  font: 11px/1.5 ui-monospace, monospace;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.scd-rcpt__c {
  background: #f4ecd8; color: #1a1a1a;
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
  border-bottom: 1.5px dashed #8a7d5a;
}
.scd-rcpt__stamp {
  position: absolute; top: 6px; right: 8px;
  font: 900 16px ui-serif, Georgia;
  color: #aa2a2a;
  border: 2px solid #aa2a2a;
  padding: 2px 8px;
  transform: rotate(-12deg);
  letter-spacing: 0.12em;
  opacity: 0.75;
}
.scd-rcpt__c::before, .scd-rcpt__c::after {
  content: ''; position: absolute; bottom: -7px;
  width: 14px; height: 14px;
  background: #17171f;
  border-radius: 50%;
}
.scd-rcpt__c::before { left: -7px; }
.scd-rcpt__c::after  { right: -7px; }
.scd-rcpt__c:last-child { border-bottom: none; }
.scd-rcpt__c:last-child::before, .scd-rcpt__c:last-child::after { display: none; }
.scd-rcpt__c b { font: 800 11px/1.2 ui-monospace; letter-spacing: 0.12em; }
<div class="scd-rcpt">
  <div class="scd-rcpt__c">
    <span class="scd-rcpt__stamp">PAID</span>
    <b>TICKET · 4218</b>
    <span>Latte · $4.50</span>
    <span>Croissant · $3.25</span>
  </div>
  <div class="scd-rcpt__c">
    <b>TICKET · 4219</b>
    <span>Espresso · $3.00</span>
  </div>
  <div class="scd-rcpt__c">
    <b>TICKET · 4220</b>
    <span>Mocha · $5.25</span>
  </div>
</div>
Live preview Edit any tab — preview updates live Ready