Open demo

CSS code

HTML 
<div class="demo-row">
<div><span class="lbl">Narrow till receipt with a QR code</span>
<div class="rc-shadow">
<article class="rc" aria-labelledby="rc-title">
  <header class="rc-head">
    <svg class="rc-logo" width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 14h18v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8z"/><path d="M25 16h2a3 3 0 0 1 0 6h-2M12 5c-1 2 1 3 0 5M17 4c-1 2 1 3 0 5M22 5c-1 2 1 3 0 5"/></svg>
    <h2 class="rc-name" id="rc-title">Copper Kettle Café</h2>
    <p class="rc-small">41 Wharf Street, Portland, ME 04101<br>(207) 555-0186</p>
  </header>
  <dl class="rc-meta">
    <div><dt>Order</dt><dd>A-1187</dd></div><div><dt>Table</dt><dd>6</dd></div>
    <div><dt>Date</dt><dd>19 Oct 2026, 08:42</dd></div><div><dt>Server</dt><dd>Jun</dd></div>
  </dl>
  <table class="rc-table">
    <caption class="sr-only">Items ordered</caption>
    <thead><tr class=""><th scope="col">Qty</th><th scope="col">Item</th><th scope="col">Amount</th></tr></thead>
    <tbody><tr class=""><td class="rc-qty">2</td><th scope="row" class="">Oat flat white</th><td class="">$9.50</td></tr><tr class=""><td class="rc-qty">1</td><th scope="row" class="">Cardamom bun</th><td class="">$3.80</td></tr><tr class=""><td class="rc-qty">1</td><th scope="row" class="">Smoked salmon bagel</th><td class="">$11.25</td></tr><tr class=""><td class="rc-qty">1</td><th scope="row" class="">Fresh orange juice</th><td class="">$5.50</td></tr></tbody>
    <tfoot class=""><tr class=""><th scope="row" colspan="2">Subtotal</th><td>$30.05</td></tr><tr class=""><th scope="row" colspan="2">Tax 5.5%</th><td>$1.65</td></tr><tr class=""><th scope="row" colspan="2">Tip 15%</th><td>$4.51</td></tr><tr class="rc-grand"><th scope="row" colspan="2">Total</th><td>$36.21</td></tr></tfoot>
  </table>
  <p class="rc-paid">Paid · Visa contactless •••• 4242<br>Auth 08429A · Approved</p>
  <div class="rc-qrwrap"><svg class="rc-qr" width="112" height="112" viewBox="-2 -2 29 29" role="img" aria-label="QR code placeholder linking to the e-receipt"><rect x="-2" y="-2" width="29" height="29" fill="#fff"/><path d="M0 0h7v1h-7zM8 0h2v1h-2zM11 0h1v1h-1zM13 0h2v1h-2zM16 0h1v1h-1zM18 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h4v1h-4zM13 1h2v1h-2zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM13 2h4v1h-4zM18 2h1v1h-1zM20 2h3v1h-3zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h1v1h-1zM12 3h1v1h-1zM14 3h3v1h-3zM18 3h1v1h-1zM20 3h3v1h-3zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM9 4h2v1h-2zM12 4h2v1h-2zM16 4h1v1h-1zM18 4h1v1h-1zM20 4h3v1h-3zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM12 5h1v1h-1zM14 5h2v1h-2zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h7v1h-7zM8 7h1v1h-1zM10 7h1v1h-1zM15 7h1v1h-1zM2 8h1v1h-1zM5 8h2v1h-2zM8 8h1v1h-1zM13 8h2v1h-2zM16 8h5v1h-5zM22 8h3v1h-3zM1 9h2v1h-2zM8 9h3v1h-3zM13 9h4v1h-4zM19 9h4v1h-4zM4 10h1v1h-1zM6 10h1v1h-1zM10 10h3v1h-3zM14 10h11v1h-11zM2 11h4v1h-4zM7 11h1v1h-1zM10 11h1v1h-1zM12 11h4v1h-4zM17 11h2v1h-2zM21 11h1v1h-1zM23 11h1v1h-1zM3 12h4v1h-4zM10 12h2v1h-2zM18 12h1v1h-1zM20 12h5v1h-5zM2 13h1v1h-1zM7 13h5v1h-5zM15 13h1v1h-1zM18 13h1v1h-1zM23 13h2v1h-2zM1 14h1v1h-1zM4 14h3v1h-3zM9 14h3v1h-3zM14 14h1v1h-1zM18 14h1v1h-1zM20 14h2v1h-2zM1 15h1v1h-1zM4 15h2v1h-2zM7 15h2v1h-2zM10 15h3v1h-3zM14 15h2v1h-2zM18 15h1v1h-1zM23 15h2v1h-2zM0 16h2v1h-2zM3 16h2v1h-2zM6 16h1v1h-1zM8 16h1v1h-1zM12 16h1v1h-1zM14 16h8v1h-8zM9 17h1v1h-1zM11 17h1v1h-1zM16 17h1v1h-1zM20 17h5v1h-5zM0 18h7v1h-7zM8 18h1v1h-1zM12 18h1v1h-1zM15 18h2v1h-2zM18 18h1v1h-1zM20 18h1v1h-1zM24 18h1v1h-1zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM10 19h3v1h-3zM14 19h1v1h-1zM16 19h1v1h-1zM20 19h2v1h-2zM0 20h1v1h-1zM2 20h3v1h-3zM6 20h1v1h-1zM8 20h3v1h-3zM12 20h3v1h-3zM16 20h5v1h-5zM22 20h2v1h-2zM0 21h1v1h-1zM2 21h3v1h-3zM6 21h1v1h-1zM8 21h2v1h-2zM13 21h1v1h-1zM15 21h1v1h-1zM17 21h2v1h-2zM21 21h2v1h-2zM24 21h1v1h-1zM0 22h1v1h-1zM2 22h3v1h-3zM6 22h1v1h-1zM8 22h6v1h-6zM15 22h1v1h-1zM17 22h5v1h-5zM24 22h1v1h-1zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM10 23h1v1h-1zM12 23h1v1h-1zM15 23h1v1h-1zM19 23h1v1h-1zM23 23h2v1h-2zM0 24h7v1h-7zM8 24h3v1h-3zM12 24h3v1h-3zM18 24h7v1h-7z" fill="currentColor"/></svg><p class="rc-small">Scan for your e-receipt</p></div>
  <p class="rc-thanks">Thank you, see you soon</p>
</article>
</div>
</div>
<div><span class="lbl">Payment confirmation with summary and pickup code</span>
<section class="pc" aria-labelledby="pc-title">
  <div class="pc-main">
    <div class="pc-check"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div>
    <h2 class="pc-title" id="pc-title">Payment successful</h2>
    <p class="pc-lead">Thank you, Aiko. Your 10-class pass is active and a receipt is on its way to [email protected].</p>
    <p class="pc-amount"><span class="pc-amountk">Amount paid</span> $180.31</p>
    <dl class="pc-dl">
      <div><dt>Reference</dt><dd>MY-88213</dd></div>
      <div><dt>Date</dt><dd>19 Oct 2026, 14:06</dd></div>
      <div><dt>Method</dt><dd>Apple Pay · Visa •••• 1881</dd></div>
    </dl>
    <table class="pc-table">
      <caption class="pc-cap">Order summary</caption>
      <thead><tr class=""><th scope="col">Item</th><th scope="col">Amount</th></tr></thead>
      <tbody class="">
        <tr><th scope="row">10-class pass<span class="pc-note">Valid until 19 Apr 2027</span></th><td>$160.00</td></tr>
        <tr><th scope="row">Cork yoga mat<span class="pc-note">Collect at the front desk</span></th><td>$29.00</td></tr>
      </tbody>
      <tfoot class="">
        <tr><th scope="row">Subtotal</th><td>$189.00</td></tr>
        <tr><th scope="row">Member discount 10%</th><td>−$18.90</td></tr>
        <tr><th scope="row">Sales tax 6%</th><td>$10.21</td></tr>
        <tr class="pc-grand"><th scope="row">Total paid</th><td>$180.31</td></tr>
      </tfoot>
    </table>
    <div class="pc-actions"><a class="pc-btn" href="#book">Book your first class</a><a class="pc-btn pc-btn--ghost" href="#receipt-pdf"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Download receipt (PDF)</a></div>
  </div>
  <aside class="pc-side" aria-labelledby="pc-pickup">
    <h3 class="pc-sideh" id="pc-pickup">Pickup code</h3>
    <svg class="pc-qr" width="150" height="150" viewBox="-2 -2 29 29" role="img" aria-label="QR code placeholder for collecting the yoga mat"><rect x="-2" y="-2" width="29" height="29" fill="#fff"/><path d="M0 0h7v1h-7zM8 0h2v1h-2zM11 0h1v1h-1zM13 0h2v1h-2zM16 0h1v1h-1zM18 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h4v1h-4zM13 1h2v1h-2zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM13 2h4v1h-4zM18 2h1v1h-1zM20 2h3v1h-3zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h1v1h-1zM12 3h1v1h-1zM14 3h3v1h-3zM18 3h1v1h-1zM20 3h3v1h-3zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM9 4h2v1h-2zM12 4h2v1h-2zM16 4h1v1h-1zM18 4h1v1h-1zM20 4h3v1h-3zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM12 5h1v1h-1zM14 5h2v1h-2zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h7v1h-7zM8 7h1v1h-1zM10 7h1v1h-1zM15 7h1v1h-1zM2 8h1v1h-1zM5 8h2v1h-2zM8 8h1v1h-1zM13 8h2v1h-2zM16 8h5v1h-5zM22 8h3v1h-3zM1 9h2v1h-2zM8 9h3v1h-3zM13 9h4v1h-4zM19 9h4v1h-4zM4 10h1v1h-1zM6 10h1v1h-1zM10 10h3v1h-3zM14 10h11v1h-11zM2 11h4v1h-4zM7 11h1v1h-1zM10 11h1v1h-1zM12 11h4v1h-4zM17 11h2v1h-2zM21 11h1v1h-1zM23 11h1v1h-1zM3 12h4v1h-4zM10 12h2v1h-2zM18 12h1v1h-1zM20 12h5v1h-5zM2 13h1v1h-1zM7 13h5v1h-5zM15 13h1v1h-1zM18 13h1v1h-1zM23 13h2v1h-2zM1 14h1v1h-1zM4 14h3v1h-3zM9 14h3v1h-3zM14 14h1v1h-1zM18 14h1v1h-1zM20 14h2v1h-2zM1 15h1v1h-1zM4 15h2v1h-2zM7 15h2v1h-2zM10 15h3v1h-3zM14 15h2v1h-2zM18 15h1v1h-1zM23 15h2v1h-2zM0 16h2v1h-2zM3 16h2v1h-2zM6 16h1v1h-1zM8 16h1v1h-1zM12 16h1v1h-1zM14 16h8v1h-8zM9 17h1v1h-1zM11 17h1v1h-1zM16 17h1v1h-1zM20 17h5v1h-5zM0 18h7v1h-7zM8 18h1v1h-1zM12 18h1v1h-1zM15 18h2v1h-2zM18 18h1v1h-1zM20 18h1v1h-1zM24 18h1v1h-1zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM10 19h3v1h-3zM14 19h1v1h-1zM16 19h1v1h-1zM20 19h2v1h-2zM0 20h1v1h-1zM2 20h3v1h-3zM6 20h1v1h-1zM8 20h3v1h-3zM12 20h3v1h-3zM16 20h5v1h-5zM22 20h2v1h-2zM0 21h1v1h-1zM2 21h3v1h-3zM6 21h1v1h-1zM8 21h2v1h-2zM13 21h1v1h-1zM15 21h1v1h-1zM17 21h2v1h-2zM21 21h2v1h-2zM24 21h1v1h-1zM0 22h1v1h-1zM2 22h3v1h-3zM6 22h1v1h-1zM8 22h6v1h-6zM15 22h1v1h-1zM17 22h5v1h-5zM24 22h1v1h-1zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM10 23h1v1h-1zM12 23h1v1h-1zM15 23h1v1h-1zM19 23h1v1h-1zM23 23h2v1h-2zM0 24h7v1h-7zM8 24h3v1h-3zM12 24h3v1h-3zM18 24h7v1h-7z" fill="currentColor"/></svg>
    <p class="pc-code">MY-88213</p>
    <p class="pc-small">Show this at Meridian Yoga Studio, 9 Elm Court, to collect your mat.</p>
  </aside>
</section>
</div>
</div>
CSS 
/* Receipt and payment confirmation. The till receipt is 320px of monospace with scalloped edges cut by a CSS mask
   (the shadow is a drop-shadow on the wrapper, since a mask also clips box-shadow). The QR codes are placeholder
   SVGs: swap in a real code from your back end. Both print cleanly; the buttons are hidden in print. */
.rc-shadow{max-width:320px;margin:0 auto;filter:drop-shadow(0 14px 22px rgba(43,33,24,.18))}
.rc{--rc-ink:#2b2118;--rc-muted:#5e5246;--rc-paper:#fffdf7;--rc-rule:#8a7c6d;
  box-sizing:border-box;padding:30px 22px;background:var(--rc-paper);color:var(--rc-ink);font:13px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  -webkit-mask:radial-gradient(circle 6px at 50% 0,#0000 97%,#000) 50% 0/14px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,#0000 97%,#000) 50% 100%/14px 51% repeat-x;
  mask:radial-gradient(circle 6px at 50% 0,#0000 97%,#000) 50% 0/14px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,#0000 97%,#000) 50% 100%/14px 51% repeat-x}
.rc *,.pc *{box-sizing:border-box}
:where(.rc,.pc) :is(h2,h3,p,dl,dd,table){margin:0}
:where(.rc,.pc) .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rc-head{text-align:center;padding-bottom:14px;border-bottom:1px dashed var(--rc-rule)}
.rc-logo{color:#c2410c}
.rc-name{font-size:1.05rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.rc-small{font-size:11.5px;color:var(--rc-muted)}
.rc-meta{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:12px 0;border-bottom:1px dashed var(--rc-rule);font-size:12px}
.rc-meta div{display:flex;gap:6px}
.rc-meta dt{color:var(--rc-muted)}
.rc-meta dt::after{content:":"}
.rc-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:8px}
.rc-table thead th{padding:4px 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--rc-muted);text-align:left}
.rc-table :is(th,td){padding:3px 0;vertical-align:top}
.rc-table tbody th{font-weight:400;text-align:left;padding-right:8px}
.rc-table :is(thead th,td):last-child{text-align:right}
.rc-qty{width:34px}
.rc-table tfoot th{font-weight:400;text-align:right;padding-right:12px;color:var(--rc-muted)}
.rc-table tfoot tr:first-child>*{padding-top:10px;border-top:1px dashed var(--rc-rule)}
.rc-grand>*{padding-top:8px!important;font-size:1.1rem;font-weight:700;color:var(--rc-ink)!important}
.rc-paid{margin-top:14px!important;padding:10px 0;border-top:1px dashed var(--rc-rule);border-bottom:1px dashed var(--rc-rule);text-align:center;font-size:12px}
.rc-qrwrap{display:grid;justify-items:center;gap:6px;padding:16px 0 8px}
.rc-qr{color:var(--rc-ink)}
.rc-thanks{text-align:center;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
/* confirmation */
.pc{--pc-accent:#c2410c;--pc-accent-dark:#9a3412;--pc-ink:#2b2118;--pc-muted:#5e5246;--pc-line:#eadfd3;--pc-soft:#fbf6f0;--pc-ok:#15803d;
  box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 220px;background:#fff;border-radius:20px;overflow:hidden;color:var(--pc-ink);font-size:14px;line-height:1.5;
  box-shadow:0 1px 2px rgba(43,33,24,.06),0 24px 48px -30px rgba(43,33,24,.4)}
.pc-main{padding:32px}
.pc-check{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#dcfce7;color:var(--pc-ok)}
.pc-title{margin-top:16px!important;font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
.pc-lead{margin-top:4px!important;color:var(--pc-muted)}
.pc-amount{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:20px!important;padding:14px 18px;border-radius:14px;background:var(--pc-soft);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pc-amountk{font-size:.86rem;font-weight:600;letter-spacing:0;color:var(--pc-muted)}
.pc-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px!important;padding-bottom:16px;border-bottom:1px solid var(--pc-line)}
.pc-dl dt{font-size:.78rem;color:var(--pc-muted)}
.pc-dl dd{font-weight:600}
.pc-table{width:100%;margin-top:16px!important;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pc-cap{text-align:left;font-weight:700;padding-bottom:6px}
.pc-table thead th{padding:6px 0;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pc-muted);text-align:left;border-bottom:1px solid var(--pc-line)}
.pc-table :is(thead th,td):last-child{text-align:right}
.pc-table tbody :is(th,td){padding:10px 0;border-bottom:1px solid var(--pc-line);vertical-align:top;text-align:left}
.pc-table tbody td{text-align:right}
.pc-table tbody th{font-weight:600}
.pc-note{display:block;font-weight:400;font-size:.82rem;color:var(--pc-muted)}
.pc-table tfoot :is(th,td){padding:3px 0;text-align:right}
.pc-table tfoot th{font-weight:400;color:var(--pc-muted);padding-right:16px}
.pc-table tfoot tr:first-child>*{padding-top:10px}
.pc-grand>*{padding-top:8px!important;font-weight:800!important;font-size:1.05rem;color:var(--pc-ink)!important}
.pc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pc-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1.5px solid var(--pc-accent);border-radius:999px;background:var(--pc-accent);color:#fff;font-weight:700;text-decoration:none;transition:background-color .15s,color .15s}
.pc-btn:hover{background:var(--pc-accent-dark);border-color:var(--pc-accent-dark)}
.pc-btn--ghost{background:#fff;color:var(--pc-accent-dark)}
.pc-btn--ghost:hover{background:var(--pc-soft);color:var(--pc-accent-dark)}
.pc-btn:focus-visible{outline:2px solid var(--pc-accent);outline-offset:3px}
.pc-side{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 20px;background:var(--pc-soft);border-left:1px dashed #cdbcaa;text-align:center}
.pc-sideh{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pc-muted)}
.pc-qr{padding:8px;border-radius:12px;background:#fff;color:var(--pc-ink);box-shadow:0 0 0 1px var(--pc-line)}
.pc-code{font:700 1.05rem/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em}
.pc-small{font-size:.8rem;color:var(--pc-muted)}
@media (max-width:640px){
  .pc{grid-template-columns:1fr}
  .pc-main{padding:24px 18px}
  .pc-side{border-left:0;border-top:1px dashed #cdbcaa}
  .pc-dl{grid-template-columns:1fr 1fr}
  .pc-amount{flex-direction:column;align-items:flex-start;gap:0}
}
@media print{.rc-shadow{filter:none}.pc{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}.pc-actions{display:none}}
@media (prefers-reduced-motion:reduce){.pc-btn{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="demo-row">
<div><span class="lbl">Narrow till receipt with a QR code</span>
<div class="rc-shadow">
<article class="rc" aria-labelledby="rc-title">
  <header class="rc-head">
    <svg class="rc-logo" width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 14h18v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8z"/><path d="M25 16h2a3 3 0 0 1 0 6h-2M12 5c-1 2 1 3 0 5M17 4c-1 2 1 3 0 5M22 5c-1 2 1 3 0 5"/></svg>
    <h2 class="rc-name" id="rc-title">Copper Kettle Café</h2>
    <p class="rc-small">41 Wharf Street, Portland, ME 04101<br>(207) 555-0186</p>
  </header>
  <dl class="rc-meta">
    <div><dt>Order</dt><dd>A-1187</dd></div><div><dt>Table</dt><dd>6</dd></div>
    <div><dt>Date</dt><dd>19 Oct 2026, 08:42</dd></div><div><dt>Server</dt><dd>Jun</dd></div>
  </dl>
  <table class="table table-sm table-borderless rc-table">
    <caption class="visually-hidden">Items ordered</caption>
    <thead><tr class=""><th scope="col">Qty</th><th scope="col">Item</th><th scope="col">Amount</th></tr></thead>
    <tbody><tr class=""><td class="rc-qty">2</td><th scope="row" class="">Oat flat white</th><td class="">$9.50</td></tr><tr class=""><td class="rc-qty">1</td><th scope="row" class="">Cardamom bun</th><td class="">$3.80</td></tr><tr class=""><td class="rc-qty">1</td><th scope="row" class="">Smoked salmon bagel</th><td class="">$11.25</td></tr><tr class=""><td class="rc-qty">1</td><th scope="row" class="">Fresh orange juice</th><td class="">$5.50</td></tr></tbody>
    <tfoot class=""><tr class=""><th scope="row" colspan="2">Subtotal</th><td>$30.05</td></tr><tr class=""><th scope="row" colspan="2">Tax 5.5%</th><td>$1.65</td></tr><tr class=""><th scope="row" colspan="2">Tip 15%</th><td>$4.51</td></tr><tr class="rc-grand"><th scope="row" colspan="2">Total</th><td>$36.21</td></tr></tfoot>
  </table>
  <p class="rc-paid">Paid · Visa contactless •••• 4242<br>Auth 08429A · Approved</p>
  <div class="rc-qrwrap"><svg class="rc-qr" width="112" height="112" viewBox="-2 -2 29 29" role="img" aria-label="QR code placeholder linking to the e-receipt"><rect x="-2" y="-2" width="29" height="29" fill="#fff"/><path d="M0 0h7v1h-7zM8 0h2v1h-2zM11 0h1v1h-1zM13 0h2v1h-2zM16 0h1v1h-1zM18 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h4v1h-4zM13 1h2v1h-2zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM13 2h4v1h-4zM18 2h1v1h-1zM20 2h3v1h-3zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h1v1h-1zM12 3h1v1h-1zM14 3h3v1h-3zM18 3h1v1h-1zM20 3h3v1h-3zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM9 4h2v1h-2zM12 4h2v1h-2zM16 4h1v1h-1zM18 4h1v1h-1zM20 4h3v1h-3zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM12 5h1v1h-1zM14 5h2v1h-2zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h7v1h-7zM8 7h1v1h-1zM10 7h1v1h-1zM15 7h1v1h-1zM2 8h1v1h-1zM5 8h2v1h-2zM8 8h1v1h-1zM13 8h2v1h-2zM16 8h5v1h-5zM22 8h3v1h-3zM1 9h2v1h-2zM8 9h3v1h-3zM13 9h4v1h-4zM19 9h4v1h-4zM4 10h1v1h-1zM6 10h1v1h-1zM10 10h3v1h-3zM14 10h11v1h-11zM2 11h4v1h-4zM7 11h1v1h-1zM10 11h1v1h-1zM12 11h4v1h-4zM17 11h2v1h-2zM21 11h1v1h-1zM23 11h1v1h-1zM3 12h4v1h-4zM10 12h2v1h-2zM18 12h1v1h-1zM20 12h5v1h-5zM2 13h1v1h-1zM7 13h5v1h-5zM15 13h1v1h-1zM18 13h1v1h-1zM23 13h2v1h-2zM1 14h1v1h-1zM4 14h3v1h-3zM9 14h3v1h-3zM14 14h1v1h-1zM18 14h1v1h-1zM20 14h2v1h-2zM1 15h1v1h-1zM4 15h2v1h-2zM7 15h2v1h-2zM10 15h3v1h-3zM14 15h2v1h-2zM18 15h1v1h-1zM23 15h2v1h-2zM0 16h2v1h-2zM3 16h2v1h-2zM6 16h1v1h-1zM8 16h1v1h-1zM12 16h1v1h-1zM14 16h8v1h-8zM9 17h1v1h-1zM11 17h1v1h-1zM16 17h1v1h-1zM20 17h5v1h-5zM0 18h7v1h-7zM8 18h1v1h-1zM12 18h1v1h-1zM15 18h2v1h-2zM18 18h1v1h-1zM20 18h1v1h-1zM24 18h1v1h-1zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM10 19h3v1h-3zM14 19h1v1h-1zM16 19h1v1h-1zM20 19h2v1h-2zM0 20h1v1h-1zM2 20h3v1h-3zM6 20h1v1h-1zM8 20h3v1h-3zM12 20h3v1h-3zM16 20h5v1h-5zM22 20h2v1h-2zM0 21h1v1h-1zM2 21h3v1h-3zM6 21h1v1h-1zM8 21h2v1h-2zM13 21h1v1h-1zM15 21h1v1h-1zM17 21h2v1h-2zM21 21h2v1h-2zM24 21h1v1h-1zM0 22h1v1h-1zM2 22h3v1h-3zM6 22h1v1h-1zM8 22h6v1h-6zM15 22h1v1h-1zM17 22h5v1h-5zM24 22h1v1h-1zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM10 23h1v1h-1zM12 23h1v1h-1zM15 23h1v1h-1zM19 23h1v1h-1zM23 23h2v1h-2zM0 24h7v1h-7zM8 24h3v1h-3zM12 24h3v1h-3zM18 24h7v1h-7z" fill="currentColor"/></svg><p class="rc-small">Scan for your e-receipt</p></div>
  <p class="rc-thanks">Thank you, see you soon</p>
</article>
</div>
</div>
<div><span class="lbl">Payment confirmation with summary and pickup code</span>
<section class="pc card" aria-labelledby="pc-title">
  <div class="pc-main">
    <div class="pc-check rounded-circle"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div>
    <h2 class="pc-title" id="pc-title">Payment successful</h2>
    <p class="pc-lead">Thank you, Aiko. Your 10-class pass is active and a receipt is on its way to [email protected].</p>
    <p class="pc-amount"><span class="pc-amountk">Amount paid</span> $180.31</p>
    <dl class="pc-dl row row-cols-2 row-cols-sm-3 g-2">
      <div><dt>Reference</dt><dd>MY-88213</dd></div>
      <div><dt>Date</dt><dd>19 Oct 2026, 14:06</dd></div>
      <div><dt>Method</dt><dd>Apple Pay · Visa •••• 1881</dd></div>
    </dl>
    <table class="table pc-table caption-top">
      <caption class="pc-cap">Order summary</caption>
      <thead><tr class=""><th scope="col">Item</th><th scope="col">Amount</th></tr></thead>
      <tbody class="">
        <tr><th scope="row">10-class pass<span class="pc-note">Valid until 19 Apr 2027</span></th><td>$160.00</td></tr>
        <tr><th scope="row">Cork yoga mat<span class="pc-note">Collect at the front desk</span></th><td>$29.00</td></tr>
      </tbody>
      <tfoot class="">
        <tr><th scope="row">Subtotal</th><td>$189.00</td></tr>
        <tr><th scope="row">Member discount 10%</th><td>−$18.90</td></tr>
        <tr><th scope="row">Sales tax 6%</th><td>$10.21</td></tr>
        <tr class="pc-grand"><th scope="row">Total paid</th><td>$180.31</td></tr>
      </tfoot>
    </table>
    <div class="pc-actions d-print-none"><a class="btn pc-btn" href="#book">Book your first class</a><a class="btn pc-btn pc-btn--ghost" href="#receipt-pdf"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Download receipt (PDF)</a></div>
  </div>
  <aside class="pc-side" aria-labelledby="pc-pickup">
    <h3 class="pc-sideh" id="pc-pickup">Pickup code</h3>
    <svg class="pc-qr" width="150" height="150" viewBox="-2 -2 29 29" role="img" aria-label="QR code placeholder for collecting the yoga mat"><rect x="-2" y="-2" width="29" height="29" fill="#fff"/><path d="M0 0h7v1h-7zM8 0h2v1h-2zM11 0h1v1h-1zM13 0h2v1h-2zM16 0h1v1h-1zM18 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h4v1h-4zM13 1h2v1h-2zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM13 2h4v1h-4zM18 2h1v1h-1zM20 2h3v1h-3zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h1v1h-1zM12 3h1v1h-1zM14 3h3v1h-3zM18 3h1v1h-1zM20 3h3v1h-3zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM9 4h2v1h-2zM12 4h2v1h-2zM16 4h1v1h-1zM18 4h1v1h-1zM20 4h3v1h-3zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM12 5h1v1h-1zM14 5h2v1h-2zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h7v1h-7zM8 7h1v1h-1zM10 7h1v1h-1zM15 7h1v1h-1zM2 8h1v1h-1zM5 8h2v1h-2zM8 8h1v1h-1zM13 8h2v1h-2zM16 8h5v1h-5zM22 8h3v1h-3zM1 9h2v1h-2zM8 9h3v1h-3zM13 9h4v1h-4zM19 9h4v1h-4zM4 10h1v1h-1zM6 10h1v1h-1zM10 10h3v1h-3zM14 10h11v1h-11zM2 11h4v1h-4zM7 11h1v1h-1zM10 11h1v1h-1zM12 11h4v1h-4zM17 11h2v1h-2zM21 11h1v1h-1zM23 11h1v1h-1zM3 12h4v1h-4zM10 12h2v1h-2zM18 12h1v1h-1zM20 12h5v1h-5zM2 13h1v1h-1zM7 13h5v1h-5zM15 13h1v1h-1zM18 13h1v1h-1zM23 13h2v1h-2zM1 14h1v1h-1zM4 14h3v1h-3zM9 14h3v1h-3zM14 14h1v1h-1zM18 14h1v1h-1zM20 14h2v1h-2zM1 15h1v1h-1zM4 15h2v1h-2zM7 15h2v1h-2zM10 15h3v1h-3zM14 15h2v1h-2zM18 15h1v1h-1zM23 15h2v1h-2zM0 16h2v1h-2zM3 16h2v1h-2zM6 16h1v1h-1zM8 16h1v1h-1zM12 16h1v1h-1zM14 16h8v1h-8zM9 17h1v1h-1zM11 17h1v1h-1zM16 17h1v1h-1zM20 17h5v1h-5zM0 18h7v1h-7zM8 18h1v1h-1zM12 18h1v1h-1zM15 18h2v1h-2zM18 18h1v1h-1zM20 18h1v1h-1zM24 18h1v1h-1zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM10 19h3v1h-3zM14 19h1v1h-1zM16 19h1v1h-1zM20 19h2v1h-2zM0 20h1v1h-1zM2 20h3v1h-3zM6 20h1v1h-1zM8 20h3v1h-3zM12 20h3v1h-3zM16 20h5v1h-5zM22 20h2v1h-2zM0 21h1v1h-1zM2 21h3v1h-3zM6 21h1v1h-1zM8 21h2v1h-2zM13 21h1v1h-1zM15 21h1v1h-1zM17 21h2v1h-2zM21 21h2v1h-2zM24 21h1v1h-1zM0 22h1v1h-1zM2 22h3v1h-3zM6 22h1v1h-1zM8 22h6v1h-6zM15 22h1v1h-1zM17 22h5v1h-5zM24 22h1v1h-1zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM10 23h1v1h-1zM12 23h1v1h-1zM15 23h1v1h-1zM19 23h1v1h-1zM23 23h2v1h-2zM0 24h7v1h-7zM8 24h3v1h-3zM12 24h3v1h-3zM18 24h7v1h-7z" fill="currentColor"/></svg>
    <p class="pc-code">MY-88213</p>
    <p class="pc-small">Show this at Meridian Yoga Studio, 9 Elm Court, to collect your mat.</p>
  </aside>
</section>
</div>
</div>
CSS 
/* Bootstrap .card, .table (sm, borderless), .row-cols grid, .btn and .d-print-none, plus the receipt styles below.
   Receipt and payment confirmation. The till receipt is 320px of monospace with scalloped edges cut by a CSS mask
   (the shadow is a drop-shadow on the wrapper, since a mask also clips box-shadow). The QR codes are placeholder
   SVGs: swap in a real code from your back end. Both print cleanly; the buttons are hidden in print. */
.rc-shadow{max-width:320px;margin:0 auto;filter:drop-shadow(0 14px 22px rgba(43,33,24,.18))}
.rc{--rc-ink:#2b2118;--rc-muted:#5e5246;--rc-paper:#fffdf7;--rc-rule:#8a7c6d;
  box-sizing:border-box;padding:30px 22px;background:var(--rc-paper);color:var(--rc-ink);font:13px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  -webkit-mask:radial-gradient(circle 6px at 50% 0,#0000 97%,#000) 50% 0/14px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,#0000 97%,#000) 50% 100%/14px 51% repeat-x;
  mask:radial-gradient(circle 6px at 50% 0,#0000 97%,#000) 50% 0/14px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,#0000 97%,#000) 50% 100%/14px 51% repeat-x}
.rc *,.pc *{box-sizing:border-box}
:where(.rc,.pc) :is(h2,h3,p,dl,dd,table){margin:0}
:where(.rc,.pc) .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rc-head{text-align:center;padding-bottom:14px;border-bottom:1px dashed var(--rc-rule)}
.rc-logo{color:#c2410c}
.rc-name{font-size:1.05rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.rc-small{font-size:11.5px;color:var(--rc-muted)}
.rc-meta{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:12px 0;border-bottom:1px dashed var(--rc-rule);font-size:12px}
.rc-meta div{display:flex;gap:6px}
.rc-meta dt{color:var(--rc-muted)}
.rc-meta dt::after{content:":"}
.rc-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:8px}
.rc-table thead th{padding:4px 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--rc-muted);text-align:left}
.rc-table :is(th,td){padding:3px 0;vertical-align:top}
.rc-table tbody th{font-weight:400;text-align:left;padding-right:8px}
.rc-table :is(thead th,td):last-child{text-align:right}
.rc-qty{width:34px}
.rc-table tfoot th{font-weight:400;text-align:right;padding-right:12px;color:var(--rc-muted)}
.rc-table tfoot tr:first-child>*{padding-top:10px;border-top:1px dashed var(--rc-rule)}
.rc-grand>*{padding-top:8px!important;font-size:1.1rem;font-weight:700;color:var(--rc-ink)!important}
.rc-paid{margin-top:14px!important;padding:10px 0;border-top:1px dashed var(--rc-rule);border-bottom:1px dashed var(--rc-rule);text-align:center;font-size:12px}
.rc-qrwrap{display:grid;justify-items:center;gap:6px;padding:16px 0 8px}
.rc-qr{color:var(--rc-ink)}
.rc-thanks{text-align:center;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
/* confirmation */
.pc{--pc-accent:#c2410c;--pc-accent-dark:#9a3412;--pc-ink:#2b2118;--pc-muted:#5e5246;--pc-line:#eadfd3;--pc-soft:#fbf6f0;--pc-ok:#15803d;
  box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 220px;background:#fff;border-radius:20px;overflow:hidden;color:var(--pc-ink);font-size:14px;line-height:1.5;
  box-shadow:0 1px 2px rgba(43,33,24,.06),0 24px 48px -30px rgba(43,33,24,.4)}
.pc-main{padding:32px}
.pc-check{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#dcfce7;color:var(--pc-ok)}
.pc-title{margin-top:16px!important;font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
.pc-lead{margin-top:4px!important;color:var(--pc-muted)}
.pc-amount{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:20px!important;padding:14px 18px;border-radius:14px;background:var(--pc-soft);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pc-amountk{font-size:.86rem;font-weight:600;letter-spacing:0;color:var(--pc-muted)}
.pc-dl{margin-top:16px!important;padding-bottom:16px;border-bottom:1px solid var(--pc-line)}
.pc-dl dt{font-size:.78rem;color:var(--pc-muted)}
.pc-dl dd{font-weight:600}
.pc-table{width:100%;margin-top:16px!important;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pc-cap{text-align:left;font-weight:700;padding-bottom:6px}
.pc-table thead th{padding:6px 0;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pc-muted);text-align:left;border-bottom:1px solid var(--pc-line)}
.pc-table :is(thead th,td):last-child{text-align:right}
.pc-table tbody :is(th,td){padding:10px 0;border-bottom:1px solid var(--pc-line);vertical-align:top;text-align:left}
.pc-table tbody td{text-align:right}
.pc-table tbody th{font-weight:600}
.pc-note{display:block;font-weight:400;font-size:.82rem;color:var(--pc-muted)}
.pc-table tfoot :is(th,td){padding:3px 0;text-align:right}
.pc-table tfoot th{font-weight:400;color:var(--pc-muted);padding-right:16px}
.pc-table tfoot tr:first-child>*{padding-top:10px}
.pc-grand>*{padding-top:8px!important;font-weight:800!important;font-size:1.05rem;color:var(--pc-ink)!important}
.pc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pc-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1.5px solid var(--pc-accent);border-radius:999px;background:var(--pc-accent);color:#fff;font-weight:700;text-decoration:none;transition:background-color .15s,color .15s}
.pc-btn:hover{background:var(--pc-accent-dark);border-color:var(--pc-accent-dark)}
.pc-btn--ghost{background:#fff;color:var(--pc-accent-dark)}
.pc-btn--ghost:hover{background:var(--pc-soft);color:var(--pc-accent-dark)}
.pc-btn:focus-visible{outline:2px solid var(--pc-accent);outline-offset:3px}
.pc-side{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 20px;background:var(--pc-soft);border-left:1px dashed #cdbcaa;text-align:center}
.pc-sideh{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pc-muted)}
.pc-qr{padding:8px;border-radius:12px;background:#fff;color:var(--pc-ink);box-shadow:0 0 0 1px var(--pc-line)}
.pc-code{font:700 1.05rem/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em}
.pc-small{font-size:.8rem;color:var(--pc-muted)}
@media (max-width:640px){
  .pc{grid-template-columns:1fr}
  .pc-main{padding:24px 18px}
  .pc-side{border-left:0;border-top:1px dashed #cdbcaa}
  
  .pc-amount{flex-direction:column;align-items:flex-start;gap:0}
}
@media print{.rc-shadow{filter:none}.pc{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}.pc-actions{display:none}}
@media (prefers-reduced-motion:reduce){.pc-btn{transition:none}}
/* Bootstrap resets the receipt and summary tables need */
.rc-table{--bs-table-bg:transparent;--bs-table-color:var(--rc-ink);margin-bottom:0}
.rc-table>:not(caption)>*>*{padding:3px 0;background:transparent}
.rc-table>thead>tr>th{padding:4px 0}
.pc{--bs-card-border-width:0;--bs-card-border-radius:20px}
.pc-table{--bs-table-bg:transparent;--bs-table-color:var(--pc-ink);--bs-table-border-color:var(--pc-line);margin-bottom:0}
.pc-table>tfoot>tr>*{border-bottom:0}
.pc-table caption{color:var(--pc-ink)}
.pc-btn{--bs-btn-font-weight:700;--bs-btn-padding-x:18px;--bs-btn-padding-y:11px;--bs-btn-border-radius:999px;--bs-btn-font-size:inherit;--bs-btn-border-width:1.5px;
  --bs-btn-bg:var(--pc-accent);--bs-btn-border-color:var(--pc-accent);--bs-btn-color:#fff;--bs-btn-hover-bg:var(--pc-accent-dark);--bs-btn-hover-border-color:var(--pc-accent-dark);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--pc-accent-dark);--bs-btn-active-color:#fff}
.pc-btn--ghost{--bs-btn-bg:#fff;--bs-btn-color:var(--pc-accent-dark);--bs-btn-hover-bg:var(--pc-soft);--bs-btn-hover-color:var(--pc-accent-dark);--bs-btn-hover-border-color:var(--pc-accent);--bs-btn-active-bg:var(--pc-soft);--bs-btn-active-color:var(--pc-accent-dark)}
.pc .btn:focus-visible{box-shadow:none}
.pc-dl>div>dd{margin:0}
.rc-meta dt,.pc-dl dt{font-weight:400}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="grid grid-cols-[340px_minmax(0,1fr)] items-start gap-12 max-[900px]:grid-cols-[minmax(0,1fr)]">
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#665748] uppercase">Narrow till receipt with a QR code</span>
<div class="mx-auto max-w-[320px] drop-shadow-[0_14px_22px_rgba(43,33,24,.18)] print:drop-shadow-none">
<article class="rc-edge bg-rc-paper px-[22px] py-[30px] font-[ui-monospace,'SF_Mono',Menlo,Consolas,'Liberation_Mono',monospace] text-[13px] leading-normal text-rc-ink" aria-labelledby="rc-title">
  <header class="border-b border-dashed border-rc-rule pb-3.5 text-center">
    <svg class="mx-auto text-[#c2410c]" width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 14h18v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8z"/><path d="M25 16h2a3 3 0 0 1 0 6h-2M12 5c-1 2 1 3 0 5M17 4c-1 2 1 3 0 5M22 5c-1 2 1 3 0 5"/></svg>
    <h2 class="mt-1 text-[1.05rem] font-bold tracking-[.06em] uppercase" id="rc-title">Copper Kettle Café</h2>
    <p class="text-[11.5px] text-rc-muted">41 Wharf Street, Portland, ME 04101<br>(207) 555-0186</p>
  </header>
  <dl class="grid grid-cols-2 gap-x-3 gap-y-0.5 border-b border-dashed border-rc-rule py-3 text-[12px] [&>div]:flex [&>div]:gap-1.5 [&_dt]:text-rc-muted [&_dt]:after:content-[':']">
    <div><dt>Order</dt><dd>A-1187</dd></div><div><dt>Table</dt><dd>6</dd></div>
    <div><dt>Date</dt><dd>19 Oct 2026, 08:42</dd></div><div><dt>Server</dt><dd>Jun</dd></div>
  </dl>
  <table class="mt-2 w-full border-collapse tabular-nums [&_td]:py-[3px] [&_td]:align-top [&_td:last-child]:text-right">
    <caption class="sr-only">Items ordered</caption>
    <thead><tr class="[&>th]:py-1 [&>th]:text-left [&>th]:text-[11px] [&>th]:font-bold [&>th]:tracking-[.06em] [&>th]:text-rc-muted [&>th]:uppercase [&>th:last-child]:text-right"><th scope="col">Qty</th><th scope="col">Item</th><th scope="col">Amount</th></tr></thead>
    <tbody><tr class="[&>th]:py-[3px] [&>th]:pr-2 [&>th]:text-left [&>th]:align-top [&>th]:font-normal"><td class="w-[34px]">2</td><th scope="row" class="">Oat flat white</th><td class="">$9.50</td></tr><tr class="[&>th]:py-[3px] [&>th]:pr-2 [&>th]:text-left [&>th]:align-top [&>th]:font-normal"><td class="w-[34px]">1</td><th scope="row" class="">Cardamom bun</th><td class="">$3.80</td></tr><tr class="[&>th]:py-[3px] [&>th]:pr-2 [&>th]:text-left [&>th]:align-top [&>th]:font-normal"><td class="w-[34px]">1</td><th scope="row" class="">Smoked salmon bagel</th><td class="">$11.25</td></tr><tr class="[&>th]:py-[3px] [&>th]:pr-2 [&>th]:text-left [&>th]:align-top [&>th]:font-normal"><td class="w-[34px]">1</td><th scope="row" class="">Fresh orange juice</th><td class="">$5.50</td></tr></tbody>
    <tfoot class="[&_th]:py-[3px] [&_th]:pr-3 [&_th]:text-right [&_th]:font-normal [&_th]:text-rc-muted [&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-dashed [&>tr:first-child>*]:border-rc-rule [&>tr:first-child>*]:pt-2.5"><tr class=""><th scope="row" colspan="2">Subtotal</th><td>$30.05</td></tr><tr class=""><th scope="row" colspan="2">Tax 5.5%</th><td>$1.65</td></tr><tr class=""><th scope="row" colspan="2">Tip 15%</th><td>$4.51</td></tr><tr class="[&>*]:pt-2! [&>*]:text-[1.1rem] [&>*]:font-bold! [&>*]:text-rc-ink!"><th scope="row" colspan="2">Total</th><td>$36.21</td></tr></tfoot>
  </table>
  <p class="mt-3.5 border-y border-dashed border-rc-rule py-2.5 text-center text-[12px]">Paid · Visa contactless •••• 4242<br>Auth 08429A · Approved</p>
  <div class="grid justify-items-center gap-1.5 pt-4 pb-2"><svg class="text-rc-ink" width="112" height="112" viewBox="-2 -2 29 29" role="img" aria-label="QR code placeholder linking to the e-receipt"><rect x="-2" y="-2" width="29" height="29" fill="#fff"/><path d="M0 0h7v1h-7zM8 0h2v1h-2zM11 0h1v1h-1zM13 0h2v1h-2zM16 0h1v1h-1zM18 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h4v1h-4zM13 1h2v1h-2zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM13 2h4v1h-4zM18 2h1v1h-1zM20 2h3v1h-3zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h1v1h-1zM12 3h1v1h-1zM14 3h3v1h-3zM18 3h1v1h-1zM20 3h3v1h-3zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM9 4h2v1h-2zM12 4h2v1h-2zM16 4h1v1h-1zM18 4h1v1h-1zM20 4h3v1h-3zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM12 5h1v1h-1zM14 5h2v1h-2zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h7v1h-7zM8 7h1v1h-1zM10 7h1v1h-1zM15 7h1v1h-1zM2 8h1v1h-1zM5 8h2v1h-2zM8 8h1v1h-1zM13 8h2v1h-2zM16 8h5v1h-5zM22 8h3v1h-3zM1 9h2v1h-2zM8 9h3v1h-3zM13 9h4v1h-4zM19 9h4v1h-4zM4 10h1v1h-1zM6 10h1v1h-1zM10 10h3v1h-3zM14 10h11v1h-11zM2 11h4v1h-4zM7 11h1v1h-1zM10 11h1v1h-1zM12 11h4v1h-4zM17 11h2v1h-2zM21 11h1v1h-1zM23 11h1v1h-1zM3 12h4v1h-4zM10 12h2v1h-2zM18 12h1v1h-1zM20 12h5v1h-5zM2 13h1v1h-1zM7 13h5v1h-5zM15 13h1v1h-1zM18 13h1v1h-1zM23 13h2v1h-2zM1 14h1v1h-1zM4 14h3v1h-3zM9 14h3v1h-3zM14 14h1v1h-1zM18 14h1v1h-1zM20 14h2v1h-2zM1 15h1v1h-1zM4 15h2v1h-2zM7 15h2v1h-2zM10 15h3v1h-3zM14 15h2v1h-2zM18 15h1v1h-1zM23 15h2v1h-2zM0 16h2v1h-2zM3 16h2v1h-2zM6 16h1v1h-1zM8 16h1v1h-1zM12 16h1v1h-1zM14 16h8v1h-8zM9 17h1v1h-1zM11 17h1v1h-1zM16 17h1v1h-1zM20 17h5v1h-5zM0 18h7v1h-7zM8 18h1v1h-1zM12 18h1v1h-1zM15 18h2v1h-2zM18 18h1v1h-1zM20 18h1v1h-1zM24 18h1v1h-1zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM10 19h3v1h-3zM14 19h1v1h-1zM16 19h1v1h-1zM20 19h2v1h-2zM0 20h1v1h-1zM2 20h3v1h-3zM6 20h1v1h-1zM8 20h3v1h-3zM12 20h3v1h-3zM16 20h5v1h-5zM22 20h2v1h-2zM0 21h1v1h-1zM2 21h3v1h-3zM6 21h1v1h-1zM8 21h2v1h-2zM13 21h1v1h-1zM15 21h1v1h-1zM17 21h2v1h-2zM21 21h2v1h-2zM24 21h1v1h-1zM0 22h1v1h-1zM2 22h3v1h-3zM6 22h1v1h-1zM8 22h6v1h-6zM15 22h1v1h-1zM17 22h5v1h-5zM24 22h1v1h-1zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM10 23h1v1h-1zM12 23h1v1h-1zM15 23h1v1h-1zM19 23h1v1h-1zM23 23h2v1h-2zM0 24h7v1h-7zM8 24h3v1h-3zM12 24h3v1h-3zM18 24h7v1h-7z" fill="currentColor"/></svg><p class="text-[11.5px] text-rc-muted">Scan for your e-receipt</p></div>
  <p class="text-center text-[12px] font-bold tracking-[.08em] uppercase">Thank you, see you soon</p>
</article>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#665748] uppercase">Payment confirmation with summary and pickup code</span>
<section class="grid grid-cols-[minmax(0,1fr)_220px] overflow-hidden rounded-[20px] bg-white text-[14px] leading-normal text-pc-ink shadow-[0_1px_2px_rgba(43,33,24,.06),0_24px_48px_-30px_rgba(43,33,24,.4)] max-[640px]:grid-cols-1 print:shadow-none print:[print-color-adjust:exact]" aria-labelledby="pc-title">
  <div class="p-8 max-[640px]:px-[18px] max-[640px]:py-6">
    <div class="grid size-[52px] place-items-center rounded-full bg-[#dcfce7] text-[#15803d]"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div>
    <h2 class="mt-4 text-[1.5rem] font-bold tracking-[-.01em]" id="pc-title">Payment successful</h2>
    <p class="mt-1 text-pc-muted">Thank you, Aiko. Your 10-class pass is active and a receipt is on its way to [email protected].</p>
    <p class="mt-5 flex items-baseline justify-between gap-3 rounded-[14px] bg-pc-soft px-[18px] py-3.5 text-[1.7rem] font-extrabold tracking-[-.02em] tabular-nums max-[640px]:flex-col max-[640px]:items-start max-[640px]:gap-0"><span class="text-[.86rem] font-semibold tracking-normal text-pc-muted">Amount paid</span> $180.31</p>
    <dl class="mt-4 grid grid-cols-3 gap-3 border-b border-pc-line pb-4 max-[640px]:grid-cols-2 [&_dd]:font-semibold [&_dt]:text-[.78rem] [&_dt]:text-pc-muted">
      <div><dt>Reference</dt><dd>MY-88213</dd></div>
      <div><dt>Date</dt><dd>19 Oct 2026, 14:06</dd></div>
      <div><dt>Method</dt><dd>Apple Pay · Visa •••• 1881</dd></div>
    </dl>
    <table class="mt-4 w-full border-collapse tabular-nums">
      <caption class="pb-1.5 text-left font-bold">Order summary</caption>
      <thead><tr class="[&>th]:border-b [&>th]:border-pc-line [&>th]:py-1.5 [&>th]:text-left [&>th]:text-[.75rem] [&>th]:font-semibold [&>th]:tracking-[.06em] [&>th]:text-pc-muted [&>th]:uppercase [&>th:last-child]:text-right"><th scope="col">Item</th><th scope="col">Amount</th></tr></thead>
      <tbody class="[&_:is(th,td)]:border-b [&_:is(th,td)]:border-pc-line [&_:is(th,td)]:py-2.5 [&_:is(th,td)]:align-top [&_td]:text-right [&_th]:text-left [&_th]:font-semibold">
        <tr><th scope="row">10-class pass<span class="block text-[.82rem] font-normal text-pc-muted">Valid until 19 Apr 2027</span></th><td>$160.00</td></tr>
        <tr><th scope="row">Cork yoga mat<span class="block text-[.82rem] font-normal text-pc-muted">Collect at the front desk</span></th><td>$29.00</td></tr>
      </tbody>
      <tfoot class="[&_:is(th,td)]:py-[3px] [&_:is(th,td)]:text-right [&_th]:pr-4 [&_th]:font-normal [&_th]:text-pc-muted [&>tr:first-child>*]:pt-2.5">
        <tr><th scope="row">Subtotal</th><td>$189.00</td></tr>
        <tr><th scope="row">Member discount 10%</th><td>−$18.90</td></tr>
        <tr><th scope="row">Sales tax 6%</th><td>$10.21</td></tr>
        <tr class="[&>*]:pt-2! [&>*]:text-[1.05rem] [&>*]:font-extrabold! [&>*]:text-pc-ink!"><th scope="row">Total paid</th><td>$180.31</td></tr>
      </tfoot>
    </table>
    <div class="mt-[22px] flex flex-wrap gap-2.5 print:hidden"><a class="inline-flex items-center gap-2 rounded-full border-[1.5px] border-pc-accent bg-pc-accent px-[18px] py-[11px] font-bold text-white transition-colors duration-150 hover:border-pc-accent-dark hover:bg-pc-accent-dark focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-pc-accent motion-reduce:transition-none" href="#book">Book your first class</a><a class="inline-flex items-center gap-2 rounded-full border-[1.5px] border-pc-accent bg-white px-[18px] py-[11px] font-bold text-pc-accent-dark transition-colors duration-150 hover:bg-pc-soft focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-pc-accent motion-reduce:transition-none" href="#receipt-pdf"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Download receipt (PDF)</a></div>
  </div>
  <aside class="flex flex-col items-center gap-2.5 border-l border-dashed border-[#cdbcaa] bg-pc-soft px-5 py-8 text-center max-[640px]:border-t max-[640px]:border-l-0" aria-labelledby="pc-pickup">
    <h3 class="text-[.78rem] font-bold tracking-[.12em] text-pc-muted uppercase" id="pc-pickup">Pickup code</h3>
    <svg class="rounded-xl bg-white p-2 text-pc-ink shadow-[0_0_0_1px_var(--color-pc-line)]" width="150" height="150" viewBox="-2 -2 29 29" role="img" aria-label="QR code placeholder for collecting the yoga mat"><rect x="-2" y="-2" width="29" height="29" fill="#fff"/><path d="M0 0h7v1h-7zM8 0h2v1h-2zM11 0h1v1h-1zM13 0h2v1h-2zM16 0h1v1h-1zM18 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h4v1h-4zM13 1h2v1h-2zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM13 2h4v1h-4zM18 2h1v1h-1zM20 2h3v1h-3zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h1v1h-1zM12 3h1v1h-1zM14 3h3v1h-3zM18 3h1v1h-1zM20 3h3v1h-3zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM9 4h2v1h-2zM12 4h2v1h-2zM16 4h1v1h-1zM18 4h1v1h-1zM20 4h3v1h-3zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM12 5h1v1h-1zM14 5h2v1h-2zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h7v1h-7zM8 7h1v1h-1zM10 7h1v1h-1zM15 7h1v1h-1zM2 8h1v1h-1zM5 8h2v1h-2zM8 8h1v1h-1zM13 8h2v1h-2zM16 8h5v1h-5zM22 8h3v1h-3zM1 9h2v1h-2zM8 9h3v1h-3zM13 9h4v1h-4zM19 9h4v1h-4zM4 10h1v1h-1zM6 10h1v1h-1zM10 10h3v1h-3zM14 10h11v1h-11zM2 11h4v1h-4zM7 11h1v1h-1zM10 11h1v1h-1zM12 11h4v1h-4zM17 11h2v1h-2zM21 11h1v1h-1zM23 11h1v1h-1zM3 12h4v1h-4zM10 12h2v1h-2zM18 12h1v1h-1zM20 12h5v1h-5zM2 13h1v1h-1zM7 13h5v1h-5zM15 13h1v1h-1zM18 13h1v1h-1zM23 13h2v1h-2zM1 14h1v1h-1zM4 14h3v1h-3zM9 14h3v1h-3zM14 14h1v1h-1zM18 14h1v1h-1zM20 14h2v1h-2zM1 15h1v1h-1zM4 15h2v1h-2zM7 15h2v1h-2zM10 15h3v1h-3zM14 15h2v1h-2zM18 15h1v1h-1zM23 15h2v1h-2zM0 16h2v1h-2zM3 16h2v1h-2zM6 16h1v1h-1zM8 16h1v1h-1zM12 16h1v1h-1zM14 16h8v1h-8zM9 17h1v1h-1zM11 17h1v1h-1zM16 17h1v1h-1zM20 17h5v1h-5zM0 18h7v1h-7zM8 18h1v1h-1zM12 18h1v1h-1zM15 18h2v1h-2zM18 18h1v1h-1zM20 18h1v1h-1zM24 18h1v1h-1zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM10 19h3v1h-3zM14 19h1v1h-1zM16 19h1v1h-1zM20 19h2v1h-2zM0 20h1v1h-1zM2 20h3v1h-3zM6 20h1v1h-1zM8 20h3v1h-3zM12 20h3v1h-3zM16 20h5v1h-5zM22 20h2v1h-2zM0 21h1v1h-1zM2 21h3v1h-3zM6 21h1v1h-1zM8 21h2v1h-2zM13 21h1v1h-1zM15 21h1v1h-1zM17 21h2v1h-2zM21 21h2v1h-2zM24 21h1v1h-1zM0 22h1v1h-1zM2 22h3v1h-3zM6 22h1v1h-1zM8 22h6v1h-6zM15 22h1v1h-1zM17 22h5v1h-5zM24 22h1v1h-1zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM10 23h1v1h-1zM12 23h1v1h-1zM15 23h1v1h-1zM19 23h1v1h-1zM23 23h2v1h-2zM0 24h7v1h-7zM8 24h3v1h-3zM12 24h3v1h-3zM18 24h7v1h-7z" fill="currentColor"/></svg>
    <p class="font-[ui-monospace,'SF_Mono',Menlo,Consolas,'Liberation_Mono',monospace] text-[1.05rem] leading-none font-bold tracking-[.12em]">MY-88213</p>
    <p class="text-[.8rem] text-pc-muted">Show this at Meridian Yoga Studio, 9 Elm Court, to collect your mat.</p>
  </aside>
</section>
</div>
</div>
CSS 
@theme {
  --color-rc-ink: #2b2118;
  --color-rc-muted: #5e5246;
  --color-rc-paper: #fffdf7;
  --color-rc-rule: #8a7c6d;
  --color-pc-accent: #c2410c;
  --color-pc-accent-dark: #9a3412;
  --color-pc-ink: #2b2118;
  --color-pc-muted: #5e5246;
  --color-pc-line: #eadfd3;
  --color-pc-soft: #fbf6f0;
}
/* scalloped top and bottom edges of the till receipt, cut with a mask */
@utility rc-edge {
  -webkit-mask: radial-gradient(circle 6px at 50% 0, #0000 97%, #000) 50% 0/14px 51% repeat-x, radial-gradient(circle 6px at 50% 100%, #0000 97%, #000) 50% 100%/14px 51% repeat-x;
  mask: radial-gradient(circle 6px at 50% 0, #0000 97%, #000) 50% 0/14px 51% repeat-x, radial-gradient(circle 6px at 50% 100%, #0000 97%, #000) 50% 100%/14px 51% repeat-x;
}

About this set

A till receipt and a payment confirmation page. Narrow till receipt with a QR code is a 320 pixel café receipt in monospace type: the shop header, order, table, date and server, the items with quantities and amounts, subtotal, tax, tip and total, the card and approval code, a QR code for the e-receipt and a thank-you line. Its top and bottom edges are scalloped with a CSS mask of radial gradients, and the shadow is a drop-shadow on a wrapper because a mask also clips box-shadow. Payment confirmation with summary and pickup code is the page people see after paying online: a success check, the amount paid, reference, date and method, an order summary table with discount and tax, a Book your first class link and a Download receipt link, and a side panel with a pickup QR code and its reference. Both QR codes are placeholder SVGs drawn with one path, so replace them with a code generated by your back end. The confirmation stacks its QR panel under the summary below 640 pixels, and both print cleanly with the buttons hidden. No JavaScript.

What’s included

  • 320px till receipt with scalloped edges cut by a CSS mask
  • Payment confirmation with amount, reference, method and order summary
  • QR code placeholders as single-path SVGs with text alternatives
  • Receipt totals with tax and tip, confirmation totals with discount and tax
  • No JavaScript, buttons hidden in print

Accessibility

The receipt is an article named by the shop name and the confirmation a section named by its heading; both use tables with captions and scoped row headers for items and totals. Each QR placeholder is an SVG with role="img" and a label saying what it links to, the check mark is decorative and hidden, links have visible focus outlines, and button transitions stop under prefers-reduced-motion.

Customise it

Change --rc-paper, --rc-ink and --rc-rule on .rc for the receipt and --pc-accent, --pc-soft and --pc-line on .pc for the confirmation. The scallop size is the 6px circle and 14px tile in the mask. In Tailwind edit the rc-* and pc-* colours in @theme.