Perforated Receipt Card

<!--
  Author: @samir-khan
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="receipt-card">
  <h4 class="receipt-card__title">ORDER #4471</h4>
  <div class="receipt-card__line"><span>Pro Subscription</span><span>$29.00</span></div>
  <div class="receipt-card__line"><span>Extra Seats (2)</span><span>$18.00</span></div>
  <div class="receipt-card__divider"></div>
  <div class="receipt-card__line receipt-card__line--total"><span>Total</span><span>$47.00</span></div>
  <span class="receipt-card__perf"></span>
</div>

/*
 * Author: @samir-khan
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.receipt-card {
  position: relative;
  width: 220px;
  padding: 24px 22px 30px;
  background: #f5f5f0;
  color: #292520;
  font-family: 'Courier New', monospace;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.receipt-card:hover {
  transform: translateY(-5px) rotate(-0.5deg);
  box-shadow: 0 22px 40px -16px rgba(0, 0, 0, 0.6);
}
.receipt-card__title {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: center;
}
.receipt-card__line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
  color: #4b4640;
}
.receipt-card__divider {
  border-top: 1px dashed #b8b3a8;
  margin: 10px 0;
}
.receipt-card__line--total {
  font-weight: 700;
  color: #17171d;
  font-size: 13px;
}
.receipt-card__perf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 12px;
  background: radial-gradient(circle at 8px 0, transparent 6px, #f5f5f0 6.5px);
  background-size: 16px 12px;
  background-repeat: repeat-x;
}