Open demo

CSS code

HTML 
<article class="invoice">
  <div class="top">
    <div><h2>Invoice #2026-0418</h2><p>Issued 12 August 2026 · Meridian Ltd</p></div>
    <span class="stamp">Paid</span>
  </div>
  <table>
    <caption class="sr-only">Line items</caption>
    <thead><tr><th scope="col">Item</th><th scope="col">Amount</th></tr></thead>
    <tbody>
      <tr><td>Team plan<span class="qty"> · 12 seats</span></td><td class="amt">$348.00</td></tr>
      <tr><td>Additional storage<span class="qty"> · 500 GB</span></td><td class="amt">$40.00</td></tr>
      <tr><td>Priority support</td><td class="amt">$99.00</td></tr>
    </tbody>
  </table>
  <dl class="tot">
    <div><dt>Subtotal</dt><dd>$487.00</dd></div>
    <div><dt>VAT (20%)</dt><dd>$97.40</dd></div>
    <div class="grand"><dt>Total</dt><dd>$584.40</dd></div>
  </dl>
  <div class="foot"><span>Visa ending 4242</span><button type="button">Download PDF</button></div>
</article>
CSS 
/* Invoice / receipt card. Line items are a real <table> with a caption and column headers; amounts
   use tabular figures so the decimals line up; the totals are a description list. */
.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}
.invoice{width:380px;max-width:100%;padding:26px 26px 22px;position:relative;overflow:hidden;background:#fff;
  border:1px solid #e9ecf1;border-radius:16px;transition:box-shadow .18s}
.invoice:hover{box-shadow:0 14px 34px -20px rgba(16,24,40,.24)}
.invoice .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px}
.invoice h2{font-size:1.1rem;letter-spacing:-.02em}
.invoice .top p{font-size:.79rem;color:#667085;margin-top:4px}
.invoice .stamp{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#15803d;
  border:2px solid #86efac;background:#f0fdf4;padding:5px 11px;border-radius:8px;transform:rotate(3deg)}
.invoice table{width:100%;border-collapse:collapse;font-size:.87rem}
.invoice th{text-align:left;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:#667085;
  padding-bottom:9px;border-bottom:1px solid #eef0f4;font-weight:700}
.invoice th:last-child,.invoice td:last-child{text-align:right}
.invoice td{padding:11px 0;border-bottom:1px solid #f4f5f8}
.invoice .qty{color:#667085;font-size:.82rem}
.invoice .amt{font-variant-numeric:tabular-nums}
.invoice .tot{margin-top:16px;display:flex;flex-direction:column;gap:8px;font-size:.87rem}
.invoice .tot div{display:flex;justify-content:space-between;color:#667085}
.invoice .tot dd{font-variant-numeric:tabular-nums}
.invoice .tot div.grand{font-size:1.05rem;font-weight:800;color:#101828;padding-top:11px;
  border-top:1px solid #eef0f4;margin-top:3px}
.invoice .foot{margin-top:20px;padding-top:16px;border-top:1px dashed #e4e7ec;display:flex;
  justify-content:space-between;align-items:center;font-size:.8rem;color:#667085}
.invoice .foot button{font:inherit;font-size:.82rem;font-weight:700;color:#4f46e5;background:none;border:0;
  cursor:pointer;padding:0;border-radius:3px}
.invoice .foot button:hover{text-decoration:underline}
.invoice .foot button:focus-visible{outline:2px solid #4f46e5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.invoice{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<article class="card invoice">
  <div class="card-body">
    <div class="top d-flex justify-content-between align-items-start gap-3">
      <div><h2 class="card-title">Invoice #2026-0418</h2><p class="issued mb-0">Issued 12 August 2026 · Meridian Ltd</p></div>
      <span class="badge text-uppercase stamp">Paid</span>
    </div>
    <table class="table">
      <caption class="visually-hidden">Line items</caption>
      <thead><tr><th scope="col">Item</th><th scope="col" class="text-end">Amount</th></tr></thead>
      <tbody>
        <tr><td>Team plan<span class="qty"> · 12 seats</span></td><td class="amt text-end">$348.00</td></tr>
        <tr><td>Additional storage<span class="qty"> · 500 GB</span></td><td class="amt text-end">$40.00</td></tr>
        <tr><td>Priority support</td><td class="amt text-end">$99.00</td></tr>
      </tbody>
    </table>
    <dl class="tot d-flex flex-column mb-0">
      <div class="d-flex justify-content-between"><dt>Subtotal</dt><dd>$487.00</dd></div>
      <div class="d-flex justify-content-between"><dt>VAT (20%)</dt><dd>$97.40</dd></div>
      <div class="d-flex justify-content-between grand"><dt>Total</dt><dd>$584.40</dd></div>
    </dl>
    <div class="foot d-flex justify-content-between align-items-center"><span>Visa ending 4242</span><button type="button" class="btn btn-link">Download PDF</button></div>
  </div>
</article>
CSS 
/* Bootstrap .card + .table + .badge + .btn-link, recoloured through --bs-table-* and --bs-btn-* variables.
   Amounts use tabular figures so the decimals line up; the totals are a description list. */
.invoice{--bs-card-border-color:#e9ecf1;--bs-card-border-radius:16px;--bs-card-spacer-y:26px;--bs-card-spacer-x:26px;
  width:380px;max-width:100%;overflow:hidden;transition:box-shadow .18s}
.invoice:hover{box-shadow:0 14px 34px -20px rgba(16,24,40,.24)}
.invoice .card-body{padding-bottom:22px}
.invoice .top{margin-bottom:22px}
.invoice .card-title{font-size:1.1rem;font-weight:700;line-height:normal;letter-spacing:-.02em;margin:0}
.invoice .issued{font-size:.79rem;color:#667085;margin-top:4px}
.invoice .stamp{--bs-badge-font-size:.7rem;--bs-badge-font-weight:800;--bs-badge-color:#15803d;--bs-badge-padding-x:11px;
  --bs-badge-padding-y:5px;--bs-badge-border-radius:8px;letter-spacing:.1em;border:2px solid #86efac;
  background:#f0fdf4;transform:rotate(3deg);line-height:normal}
.invoice .table{--bs-table-color:#101828;--bs-table-bg:transparent;--bs-table-border-color:#f4f5f8;font-size:.87rem;margin:0}
.invoice .table > :not(caption) > * > *{padding:11px 0}
.invoice .table > thead > tr > th{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:#667085;
  padding:0 0 9px;border-bottom-color:#eef0f4;font-weight:700}
.invoice .qty{color:#667085;font-size:.82rem}
.invoice .amt{font-variant-numeric:tabular-nums}
.invoice .tot{margin-top:16px;gap:8px;font-size:.87rem}
.invoice .tot div{color:#667085}
.invoice .tot dt{font-weight:400}
.invoice .tot dd{margin:0;font-variant-numeric:tabular-nums}
.invoice .tot .grand{font-size:1.05rem;color:#101828;padding-top:11px;border-top:1px solid #eef0f4;margin-top:3px}
.invoice .tot .grand dt,.invoice .tot .grand dd{font-weight:800}
.invoice .foot{margin-top:20px;padding-top:16px;border-top:1px dashed #e4e7ec;font-size:.8rem;color:#667085}
.invoice .btn-link{--bs-btn-color:#4f46e5;--bs-btn-hover-color:#4f46e5;--bs-btn-active-color:#4338ca;--bs-btn-padding-x:0;
  --bs-btn-padding-y:0;--bs-btn-font-size:.82rem;--bs-btn-font-weight:700;--bs-btn-line-height:normal;
  --bs-btn-focus-box-shadow:0 0 0 2px #fff,0 0 0 4px #4f46e5;text-decoration:none;border-radius:3px}
.invoice .btn-link:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.invoice,.invoice .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<article class="relative w-[380px] max-w-full overflow-hidden rounded-2xl border border-[#e9ecf1] bg-white px-[26px] pt-[26px] pb-[22px] transition-shadow duration-[180ms] hover:shadow-[0_14px_34px_-20px_rgba(16,24,40,.24)] motion-reduce:transition-none">
  <div class="mb-[22px] flex items-start justify-between gap-3">
    <div><h2 class="text-[1.1rem] font-bold tracking-[-.02em]">Invoice #2026-0418</h2><p class="mt-1 text-[.79rem] text-[#667085]">Issued 12 August 2026 · Meridian Ltd</p></div>
    <span class="rotate-3 rounded-lg border-2 border-[#86efac] bg-[#f0fdf4] px-[11px] py-[5px] text-[.7rem] font-extrabold tracking-[.1em] text-[#15803d] uppercase">Paid</span>
  </div>
  <table class="w-full border-collapse text-[.87rem] [&_td]:border-b [&_td]:border-[#f4f5f8] [&_td]:py-[11px] [&_td:last-child]:text-right [&_td:last-child]:tabular-nums">
    <caption class="sr-only">Line items</caption>
    <thead><tr class="[&>th]:border-b [&>th]:border-[#eef0f4] [&>th]:pb-[9px] [&>th]:text-left [&>th]:text-[.7rem] [&>th]:font-bold [&>th]:tracking-[.07em] [&>th]:text-[#667085] [&>th]:uppercase [&>th:last-child]:text-right"><th scope="col">Item</th><th scope="col">Amount</th></tr></thead>
    <tbody>
      <tr><td>Team plan<span class="text-[.82rem] text-[#667085]"> · 12 seats</span></td><td>$348.00</td></tr>
      <tr><td>Additional storage<span class="text-[.82rem] text-[#667085]"> · 500 GB</span></td><td>$40.00</td></tr>
      <tr><td>Priority support</td><td>$99.00</td></tr>
    </tbody>
  </table>
  <dl class="mt-4 flex flex-col gap-2 text-[.87rem] text-[#667085] [&_dd]:tabular-nums [&>div]:flex [&>div]:justify-between">
    <div><dt>Subtotal</dt><dd>$487.00</dd></div>
    <div><dt>VAT (20%)</dt><dd>$97.40</dd></div>
    <div class="mt-[3px] border-t border-[#eef0f4] pt-[11px] text-[1.05rem] font-extrabold text-[#101828]"><dt>Total</dt><dd>$584.40</dd></div>
  </dl>
  <div class="mt-5 flex items-center justify-between border-t border-dashed border-[#e4e7ec] pt-4 text-[.8rem] text-[#667085]"><span>Visa ending 4242</span><button class="cursor-pointer rounded-[3px] text-[.82rem] font-bold text-[#4f46e5] hover:underline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#4f46e5]" type="button">Download PDF</button></div>
</article>

About this set

A receipt card for billing pages and order confirmations. The header shows the invoice number, the issue date and the customer, with a slightly rotated green Paid stamp. Three line items follow in a real table with a hidden caption and column headers, each item optionally followed by a quantity note in grey. Below the table, the subtotal, VAT at 20 percent and the bold total sit in a description list, and a dashed footer shows the payment card and a Download PDF button. Every amount uses tabular figures so the decimal points line up down the column, and the figures add up: 348 plus 40 plus 99 is 487, VAT is 97.40 and the total is 584.40. Use it in account billing history, checkout success pages and email-style receipts. The Bootstrap version uses .card, the stock .table restyled through –bs-table-* variables, a .badge for the stamp and .btn-link for the download; the Tailwind version styles the table cells from the table element with arbitrary child selectors.

What’s included

  • Line items in a real table with caption and headers
  • Totals marked up as a description list
  • Tabular figures so amounts align
  • Rotated Paid stamp drawn in CSS
  • Bootstrap version built on .table and .badge

Accessibility

The invoice number is an h2, the table has a visually hidden caption and th scope="col" headers, and the totals pair each label and amount in dt and dd. The Paid status is written as text, not shown by colour alone. Download PDF is a real button with a 2px indigo focus outline, grey text was darkened to reach 4.5:1, and the hover shadow transition is switched off under reduced motion.

Customise it

The stamp colours are #15803d, #86efac and #f0fdf4 on .stamp (a badge in Bootstrap); change them for Due or Overdue states. Row borders and padding are on .invoice td, on .table > :not(caption) > * > * in Bootstrap, and in the [&_td] utilities in Tailwind.