Receipt

POS thermal receipt with company header, item list, totals, payment info, footer message, and barcode section.

Basic Receipt

Preview

ERPlora S.L. Calle Gran Vía 42, Madrid Tel: +34 912 345 678 CIF: B-12345678

Date 07/02/2026 14:32

Receipt #00421

Cashier Ana M.

2x Café Espresso €5.00

1x Tostada Integral €4.50

1x Zumo de Naranja €3.50

1x Croissant Mantequilla €2.20

Subtotal €15.20

IVA (10%) €1.52

TOTAL €16.72

Cash €20.00

Change €3.28

0042-1-2026020714

<div class="receipt">
  <div class="receipt-header">
    <div class="receipt-logo">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:2.5rem;height:2.5rem;"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 13h4"/></svg>
    </div>
    <span class="receipt-company">ERPlora S.L.</span>
    <span class="receipt-address">Calle Gran V&iacute;a 42, Madrid</span>
    <span class="receipt-phone">Tel: +34 912 345 678</span>
    <span class="receipt-tax-id">CIF: B-12345678</span>
  </div>

  <div class="receipt-info">
    <div class="receipt-info-row">
      <span class="receipt-info-label">Date</span>
      <span class="receipt-info-value">07/02/2026 14:32</span>
    </div>
    <div class="receipt-info-row">
      <span class="receipt-info-label">Receipt</span>
      <span class="receipt-info-value">#00421</span>
    </div>
    <div class="receipt-info-row">
      <span class="receipt-info-label">Cashier</span>
      <span class="receipt-info-value">Ana M.</span>
    </div>
  </div>

  <div class="receipt-items">
    <div class="receipt-item">
      <span class="receipt-item-qty">2x</span>
      <span class="receipt-item-name">Caf&eacute; Espresso</span>
      <span class="receipt-item-price">&euro;5.00</span>
    </div>
    <div class="receipt-item">
      <span class="receipt-item-qty">1x</span>
      <span class="receipt-item-name">Tostada Integral</span>
      <span class="receipt-item-price">&euro;4.50</span>
    </div>
    <div class="receipt-item">
      <span class="receipt-item-qty">1x</span>
      <span class="receipt-item-name">Zumo de Naranja</span>
      <span class="receipt-item-price">&euro;3.50</span>
    </div>
    <div class="receipt-item">
      <span class="receipt-item-qty">1x</span>
      <span class="receipt-item-name">Croissant Mantequilla</span>
      <span class="receipt-item-price">&euro;2.20</span>
    </div>
  </div>

  <div class="receipt-totals">
    <div class="receipt-subtotal">
      <span>Subtotal</span>
      <span>&euro;15.20</span>
    </div>
    <div class="receipt-tax">
      <span>IVA (10%)</span>
      <span>&euro;1.52</span>
    </div>
    <div class="receipt-total">
      <span>TOTAL</span>
      <span>&euro;16.72</span>
    </div>
  </div>

  <div class="receipt-payment">
    <div class="receipt-info-row">
      <span class="receipt-info-label">Cash</span>
      <span class="receipt-info-value">&euro;20.00</span>
    </div>
    <div class="receipt-info-row">
      <span class="receipt-info-label">Change</span>
      <span class="receipt-info-value">&euro;3.28</span>
    </div>
  </div>

  <div class="receipt-footer">
    <p>Thank you for your visit!</p>
    <p>ERPlora POS - www.erplora.com</p>
  </div>

  <div class="receipt-barcode">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 40" style="width:100%;height:40px;">
      <rect x="10" width="2" height="40" fill="currentColor"/><rect x="15" width="1" height="40" fill="currentColor"/><rect x="18" width="3" height="40" fill="currentColor"/><rect x="24" width="1" height="40" fill="currentColor"/><rect x="28" width="2" height="40" fill="currentColor"/><rect x="33" width="1" height="40" fill="currentColor"/><rect x="37" width="3" height="40" fill="currentColor"/><rect x="43" width="1" height="40" fill="currentColor"/><rect x="47" width="2" height="40" fill="currentColor"/><rect x="52" width="1" height="40" fill="currentColor"/><rect x="56" width="3" height="40" fill="currentColor"/><rect x="62" width="2" height="40" fill="currentColor"/><rect x="67" width="1" height="40" fill="currentColor"/><rect x="71" width="2" height="40" fill="currentColor"/><rect x="76" width="3" height="40" fill="currentColor"/><rect x="82" width="1" height="40" fill="currentColor"/><rect x="86" width="2" height="40" fill="currentColor"/><rect x="91" width="1" height="40" fill="currentColor"/><rect x="95" width="3" height="40" fill="currentColor"/><rect x="101" width="2" height="40" fill="currentColor"/><rect x="106" width="1" height="40" fill="currentColor"/><rect x="110" width="2" height="40" fill="currentColor"/><rect x="115" width="3" height="40" fill="currentColor"/><rect x="121" width="1" height="40" fill="currentColor"/><rect x="125" width="2" height="40" fill="currentColor"/><rect x="130" width="1" height="40" fill="currentColor"/><rect x="134" width="3" height="40" fill="currentColor"/><rect x="140" width="2" height="40" fill="currentColor"/><rect x="145" width="1" height="40" fill="currentColor"/><rect x="149" width="2" height="40" fill="currentColor"/><rect x="154" width="3" height="40" fill="currentColor"/><rect x="160" width="1" height="40" fill="currentColor"/><rect x="164" width="2" height="40" fill="currentColor"/><rect x="169" width="1" height="40" fill="currentColor"/><rect x="173" width="3" height="40" fill="currentColor"/><rect x="179" width="2" height="40" fill="currentColor"/><rect x="184" width="1" height="40" fill="currentColor"/><rect x="188" width="2" height="40" fill="currentColor"/>
    </svg>
    <span style="font-size: 0.625rem; opacity: 0.5;">0042-1-2026020714</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-[280px] bg-white text-neutral-900 font-mono text-xs shadow-lg rounded-sm p-6">
  <div class="flex flex-col items-center gap-1 pb-4 border-b border-dashed border-neutral-300 text-center">
    <svg class="size-10 mb-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 13h4"/></svg>
    <span class="text-sm font-bold">ERPlora S.L.</span>
    <span class="opacity-60">Calle Gran V&iacute;a 42, Madrid</span>
    <span class="opacity-60">Tel: +34 912 345 678</span>
    <span class="opacity-60">CIF: B-12345678</span>
  </div>
  <div class="flex flex-col gap-0.5 py-3 border-b border-dashed border-neutral-300">
    <div class="flex justify-between"><span class="opacity-60">Date</span><span>07/02/2026 14:32</span></div>
    <div class="flex justify-between"><span class="opacity-60">Receipt</span><span>#00421</span></div>
    <div class="flex justify-between"><span class="opacity-60">Cashier</span><span>Ana M.</span></div>
  </div>
  <div class="flex flex-col gap-1 py-3 border-b border-dashed border-neutral-300">
    <div class="flex gap-2"><span class="shrink-0 w-6 text-right">2x</span><span class="flex-1">Caf&eacute; Espresso</span><span class="shrink-0 text-right">&euro;5.00</span></div>
    <div class="flex gap-2"><span class="shrink-0 w-6 text-right">1x</span><span class="flex-1">Tostada Integral</span><span class="shrink-0 text-right">&euro;4.50</span></div>
    <div class="flex gap-2"><span class="shrink-0 w-6 text-right">1x</span><span class="flex-1">Zumo de Naranja</span><span class="shrink-0 text-right">&euro;3.50</span></div>
    <div class="flex gap-2"><span class="shrink-0 w-6 text-right">1x</span><span class="flex-1">Croissant Mantequilla</span><span class="shrink-0 text-right">&euro;2.20</span></div>
  </div>
  <div class="flex flex-col gap-1 py-3 border-b border-dashed border-neutral-300">
    <div class="flex justify-between"><span>Subtotal</span><span>&euro;15.20</span></div>
    <div class="flex justify-between opacity-60"><span>IVA (10%)</span><span>&euro;1.52</span></div>
    <div class="flex justify-between font-bold text-sm pt-1 mt-1 border-t border-neutral-300"><span>TOTAL</span><span>&euro;16.72</span></div>
  </div>
  <div class="flex flex-col gap-0.5 py-3 border-b border-dashed border-neutral-300">
    <div class="flex justify-between"><span class="opacity-60">Cash</span><span>&euro;20.00</span></div>
    <div class="flex justify-between"><span class="opacity-60">Change</span><span>&euro;3.28</span></div>
  </div>
  <div class="flex flex-col items-center gap-1 pt-4 text-center opacity-60">
    <p class="m-0">Thank you for your visit!</p>
    <p class="m-0">ERPlora POS - www.erplora.com</p>
  </div>
</div>

Requires: tw.min.css

// Print receipt
function printReceipt(receiptEl) {
  const printWindow = window.open('', '_blank');
  printWindow.document.write('<html><body>' + receiptEl.outerHTML + '</body></html>');
  printWindow.document.close();
  printWindow.print();
}

// Example: printReceipt(document.querySelector('.receipt'));

Receipt Sizes

Preview

ERPlora S.L. Madrid

2x Café €5.00

1x Tostada €4.50

TOTAL €9.50

ERPlora S.L. Calle Gran Vía 42, 28013 Madrid Tel: +34 912 345 678

3x Menú del Día €36.00

3x Agua Mineral €4.50

1x Postre Especial €6.00

Subtotal €46.50

IVA (10%) €4.65

TOTAL €51.15

<div class="flex gap-6 flex-wrap items-start">
  <!-- Small -->
  <div class="receipt receipt-sm">
    <div class="receipt-header">
      <span class="receipt-company">ERPlora S.L.</span>
      <span class="receipt-address">Madrid</span>
    </div>
    <div class="receipt-items">
      <div class="receipt-item">
        <span class="receipt-item-qty">2x</span>
        <span class="receipt-item-name">Caf&eacute;</span>
        <span class="receipt-item-price">&euro;5.00</span>
      </div>
      <div class="receipt-item">
        <span class="receipt-item-qty">1x</span>
        <span class="receipt-item-name">Tostada</span>
        <span class="receipt-item-price">&euro;4.50</span>
      </div>
    </div>
    <div class="receipt-totals">
      <div class="receipt-total">
        <span>TOTAL</span>
        <span>&euro;9.50</span>
      </div>
    </div>
    <div class="receipt-footer">
      <p>Thanks!</p>
    </div>
  </div>

  <!-- Large -->
  <div class="receipt receipt-lg">
    <div class="receipt-header">
      <div class="receipt-logo">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:3rem;height:3rem;"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 13h4"/></svg>
      </div>
      <span class="receipt-company">ERPlora S.L.</span>
      <span class="receipt-address">Calle Gran V&iacute;a 42, 28013 Madrid</span>
      <span class="receipt-phone">Tel: +34 912 345 678</span>
    </div>
    <div class="receipt-items">
      <div class="receipt-item">
        <span class="receipt-item-qty">3x</span>
        <span class="receipt-item-name">Men&uacute; del D&iacute;a</span>
        <span class="receipt-item-price">&euro;36.00</span>
      </div>
      <div class="receipt-item">
        <span class="receipt-item-qty">3x</span>
        <span class="receipt-item-name">Agua Mineral</span>
        <span class="receipt-item-price">&euro;4.50</span>
      </div>
      <div class="receipt-item">
        <span class="receipt-item-qty">1x</span>
        <span class="receipt-item-name">Postre Especial</span>
        <span class="receipt-item-price">&euro;6.00</span>
      </div>
    </div>
    <div class="receipt-totals">
      <div class="receipt-subtotal">
        <span>Subtotal</span>
        <span>&euro;46.50</span>
      </div>
      <div class="receipt-tax">
        <span>IVA (10%)</span>
        <span>&euro;4.65</span>
      </div>
      <div class="receipt-total">
        <span>TOTAL</span>
        <span>&euro;51.15</span>
      </div>
    </div>
    <div class="receipt-footer">
      <p>Thank you for dining with us!</p>
      <p>ERPlora POS</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- .receipt-sm reduces width to ~220px with smaller font
     .receipt-lg increases width to ~340px with larger font and spacing -->
<div class="flex gap-6 flex-wrap items-start">
  <div class="flex flex-col w-[220px] bg-white text-neutral-900 font-mono text-[10px] shadow-lg rounded-sm p-4">
    <!-- Smaller receipt content -->
  </div>
  <div class="flex flex-col w-[340px] bg-white text-neutral-900 font-mono text-sm shadow-lg rounded-sm p-8">
    <!-- Larger receipt content -->
  </div>
</div>

Requires: tw.min.css

// No additional JS needed — sizes are CSS-only variants

Glass Receipt

Preview

ERPlora S.L. Calle Gran Vía 42, Madrid

Date 07/02/2026

Receipt #00422

1x Café Latte €3.00

1x Croissant €1.80

TOTAL €4.80

<div style="background: linear-gradient(135deg, #667eea, #764ba2); padding: 1.5rem; border-radius: 0.75rem;">
  <div class="receipt glass">
    <div class="receipt-header">
      <span class="receipt-company">ERPlora S.L.</span>
      <span class="receipt-address">Calle Gran V&iacute;a 42, Madrid</span>
    </div>
    <div class="receipt-info">
      <div class="receipt-info-row">
        <span class="receipt-info-label">Date</span>
        <span class="receipt-info-value">07/02/2026</span>
      </div>
      <div class="receipt-info-row">
        <span class="receipt-info-label">Receipt</span>
        <span class="receipt-info-value">#00422</span>
      </div>
    </div>
    <div class="receipt-items">
      <div class="receipt-item">
        <span class="receipt-item-qty">1x</span>
        <span class="receipt-item-name">Caf&eacute; Latte</span>
        <span class="receipt-item-price">&euro;3.00</span>
      </div>
      <div class="receipt-item">
        <span class="receipt-item-qty">1x</span>
        <span class="receipt-item-name">Croissant</span>
        <span class="receipt-item-price">&euro;1.80</span>
      </div>
    </div>
    <div class="receipt-totals">
      <div class="receipt-total">
        <span>TOTAL</span>
        <span>&euro;4.80</span>
      </div>
    </div>
    <div class="receipt-footer">
      <p>Thank you!</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Add .glass class to .receipt for glass morphism effect -->
<div style="background: linear-gradient(135deg, #667eea, #764ba2); padding: 1.5rem; border-radius: 0.75rem;">
  <div class="flex flex-col w-[280px] font-mono text-xs p-6 rounded-sm bg-white/10 backdrop-blur-xl border border-white/20 text-white">
    <!-- Glass receipt content -->
  </div>
</div>

Requires: tw.min.css

// No JS needed — glass is a CSS-only variant

Classes Reference

Class	Description
.receipt	Base container (monospace, 280px, shadow, padding)
.receipt-header	Top section (centered, dashed border bottom)
.receipt-logo	Logo container
.receipt-company	Company name (bold)
.receipt-address	Address line
.receipt-phone	Phone line
.receipt-tax-id	Tax ID line
.receipt-info	Info section (date, receipt #, cashier)
.receipt-info-row	Flex between row for info
.receipt-info-label	Info label (dimmed)
.receipt-info-value	Info value
.receipt-items	Items section
.receipt-item	Item row
.receipt-item-qty	Item quantity
.receipt-item-name	Item name
.receipt-item-price	Item price
.receipt-totals	Totals section
.receipt-subtotal	Subtotal row
.receipt-tax	Tax row
.receipt-total	Total row (bold, larger)
.receipt-payment	Payment info section
.receipt-footer	Bottom section (thank you message)
.receipt-barcode	Barcode/QR section
.receipt-sm	Small size variant (~220px)
.receipt-lg	Large size variant (~340px)
.glass	Glass morphism variant