Back to Docs
Recipe
Invoice Design
A clean, print-ready invoice layout with line items, tax breakdown, and payment terms — built entirely with HTML and Tailwind CSS.
Overview
This recipe walks through structuring a professional invoice component. You will learn how to lay out sender and recipient blocks, build a responsive line-item table, calculate subtotals and tax, and style a payment-terms footer. The result renders perfectly in the browser and prints cleanly on A4 or Letter.
Key Techniques
- CSS Grid for the header with sender left, recipient right
- Table with striped rows and right-aligned currency columns
- Flexbox summary block for subtotal, tax, and total
- Print media query to hide browser chrome and set page margins
Structure
Component Tree
InvoiceRoot ├── InvoiceHeader │ ├── SenderInfo (company, address, VAT) │ └── RecipientInfo (client, address) ├── InvoiceMeta (number, dates, due) ├── LineItemsTable │ ├── HeaderRow │ └── ItemRow[] (desc, qty, rate, amount) ├── TotalsBlock │ ├── Subtotal │ ├── TaxRate │ └── GrandTotal └── PaymentTermsFooter
Print Styling
Wrap print-specific rules in @media print. Set @page { margin: 1.5cm }, hide navigation elements, and ensure the invoice fills the page width. Use break-inside: avoid on table rows to prevent awkward page breaks mid-item.