Invoice

Invoice 10 · Pay now page

A two-column pay screen: the invoice summary on the left and card fields with a pay button on the right. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-8'><div class='mx-auto grid max-w-4xl overflow-hidden rounded-3xl border border-neutral-200 bg-white md:grid-cols-2'><div class='bg-black p-10'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo-light.png' alt='Windcraft' class='h-6 w-auto'><p class='mt-10 text-sm text-neutral-400'>Pay invoice INV-0042</p><p class='mt-1 text-4xl font-semibold text-white'>$686.40</p><ul class='mt-8 space-y-2 text-sm text-neutral-400'><li class='flex justify-between'><span>Design work</span><span>$600.00</span></li><li class='flex justify-between'><span>Hosting</span><span>$24.00</span></li><li class='flex justify-between'><span>Tax</span><span>$62.40</span></li></ul></div><form class='space-y-4 p-10'><h2 class='text-lg font-semibold text-black'>Card details</h2><input type='text' placeholder='Card number' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><div class='grid grid-cols-2 gap-3'><input type='text' placeholder='MM / YY' class='rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><input type='text' placeholder='CVC' class='rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></div><button type='button' class='w-full rounded-lg bg-black py-3 text-sm font-semibold text-white'>Pay $686.40</button></form></div></section>

Invoice 09 · Quote and estimate

An estimate layout with a Quote title, a validity date, line items and an accept button. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-8'><div class='mx-auto max-w-3xl rounded-2xl border border-neutral-200 bg-white p-10'><div class='flex items-start justify-between'><div><p class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Quote</p><p class='mt-1 text-2xl font-semibold text-black'>Website redesign</p></div><p class='text-right text-sm text-neutral-500'>QUO-0007<br>Valid until 30 Nov 2026</p></div><table class='mt-8 w-full text-left text-sm'><tbody class='divide-y divide-neutral-100'><tr><td class='py-3 text-black'>Design (12 h at $50)</td><td class='py-3 text-right text-neutral-700'>$600.00</td></tr><tr><td class='py-3 text-black'>Hosting set-up</td><td class='py-3 text-right text-neutral-700'>$24.00</td></tr><tr class='font-semibold'><td class='pt-4 text-black'>Estimated total</td><td class='pt-4 text-right text-black'>$624.00</td></tr></tbody></table><div class='mt-8 flex gap-2'><button type='button' class='rounded-lg bg-black px-5 py-2.5 text-sm font-semibold text-white'>Accept quote</button><button type='button' class='rounded-lg border border-neutral-300 px-5 py-2.5 text-sm font-medium text-black'>Ask a question</button></div></div></section>

Invoice 08 · Tax breakdown table

A line-items table with an extra tax column and a totals block that shows subtotal, tax and total. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-8'><div class='mx-auto max-w-4xl overflow-x-auto rounded-2xl border border-neutral-200'><table class='w-full text-left text-sm'><thead class='bg-neutral-50 text-neutral-500'><tr><th class='px-5 py-3 font-medium'>Description</th><th class='px-5 py-3 text-right font-medium'>Net</th><th class='px-5 py-3 text-right font-medium'>Tax</th><th class='px-5 py-3 text-right font-medium'>Gross</th></tr></thead><tbody class='divide-y divide-neutral-100 text-neutral-700'><tr><td class='px-5 py-3 text-black'>Design work</td><td class='px-5 py-3 text-right'>$600.00</td><td class='px-5 py-3 text-right'>$60.00</td><td class='px-5 py-3 text-right'>$660.00</td></tr><tr><td class='px-5 py-3 text-black'>Hosting</td><td class='px-5 py-3 text-right'>$24.00</td><td class='px-5 py-3 text-right'>$2.40</td><td class='px-5 py-3 text-right'>$26.40</td></tr></tbody><tfoot class='bg-neutral-50 font-semibold text-black'><tr><td class='px-5 py-3'>Total</td><td class='px-5 py-3 text-right'>$624.00</td><td class='px-5 py-3 text-right'>$62.40</td><td class='px-5 py-3 text-right'>$686.40</td></tr></tfoot></table></div></section>

Invoice 07 · Summary card with actions

A compact summary card with the invoice number, a status badge, the total and Download and Send buttons. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-10'><div class='mx-auto max-w-sm rounded-2xl border border-neutral-200 bg-white p-6'><div class='flex items-center justify-between'><p class='font-mono text-sm text-black'>INV-0042</p><span class='rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-600'>Pending</span></div><p class='mt-4 text-4xl font-semibold text-black'>$686.40</p><p class='mt-1 text-sm text-neutral-500'>Due 26 Nov 2026</p><div class='mt-6 grid grid-cols-2 gap-2'><button type='button' class='rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Download</button><button type='button' class='rounded-lg border border-neutral-300 py-2.5 text-sm font-medium text-black'>Send</button></div></div></section>

Invoice 06 · Paid stamp

An invoice with a large outlined PAID mark on the right of the totals. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-8'><div class='mx-auto max-w-3xl rounded-2xl border border-neutral-200 bg-white p-10'><div class='flex items-start justify-between'><div><p class='text-xl font-semibold text-black'>Invoice INV-0041</p><p class='mt-1 text-sm text-neutral-500'>Issued 1 Oct 2026</p></div><span class='rotate-6 rounded-lg border-4 border-black px-4 py-1 text-2xl font-extrabold tracking-widest text-black'>PAID</span></div><table class='mt-8 w-full text-left text-sm'><tbody class='divide-y divide-neutral-100'><tr><td class='py-3 text-black'>Design work (12 h)</td><td class='py-3 text-right text-neutral-700'>$600.00</td></tr><tr><td class='py-3 text-black'>Hosting</td><td class='py-3 text-right text-neutral-700'>$24.00</td></tr><tr><td class='py-3 text-neutral-500'>Tax (10%)</td><td class='py-3 text-right text-neutral-700'>$62.40</td></tr><tr class='font-semibold'><td class='pt-4 text-black'>Total paid</td><td class='pt-4 text-right text-black'>$686.40</td></tr></tbody></table></div></section>

Invoice 05 · Narrow receipt

A receipt-style narrow card with a dashed divider, one line item and a total. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-100 p-10'><div class='mx-auto w-full max-w-xs rounded-lg bg-white p-6 font-mono text-sm shadow-sm'><div class='text-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='mx-auto h-6 w-auto'><p class='mt-2 text-xs text-neutral-500'>Receipt · 12 Nov 2026</p></div><div class='my-5 border-t border-dashed border-neutral-300'></div><div class='flex justify-between text-black'><span>Pro plan, 1 month</span><span>$12.00</span></div><div class='my-5 border-t border-dashed border-neutral-300'></div><div class='flex justify-between font-semibold text-black'><span>Total</span><span>$12.00</span></div><p class='mt-5 text-center text-xs text-neutral-500'>Paid by card ending 4242 (sample)</p></div></section>

Invoice 04 · With payment terms

An invoice ending with a notes block: payment terms, bank details placeholder and a thank-you line. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-8'><div class='mx-auto max-w-3xl rounded-2xl border border-neutral-200 bg-white p-10'><div class='flex justify-between text-sm'><div><p class='text-xl font-semibold text-black'>Invoice INV-0042</p><p class='mt-1 text-neutral-500'>Issued 12 Nov 2026</p></div><p class='text-right text-neutral-600'>Northwind Ltd<br>34 Example Road</p></div><table class='mt-8 w-full text-left text-sm'><tbody class='divide-y divide-neutral-100'><tr><td class='py-3 text-black'>Design work (12 h)</td><td class='py-3 text-right text-neutral-700'>$600.00</td></tr><tr><td class='py-3 text-black'>Hosting</td><td class='py-3 text-right text-neutral-700'>$24.00</td></tr><tr><td class='py-3 text-neutral-500'>Tax (10%)</td><td class='py-3 text-right text-neutral-700'>$62.40</td></tr><tr class='font-semibold'><td class='pt-4 text-black'>Total</td><td class='pt-4 text-right text-black'>$686.40</td></tr></tbody></table><div class='mt-10 rounded-xl bg-neutral-50 p-5 text-sm'><p class='font-semibold text-black'>Payment terms</p><p class='mt-1 text-neutral-600'>Pay within 14 days by bank transfer. Account details: [your account here].</p></div><p class='mt-6 text-sm text-neutral-500'>Thank you for your business.</p></div></section>

Invoice 03 · Dark header band

An invoice that starts with a black band holding the white logo and the amount due, then items below. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-8'><div class='mx-auto max-w-3xl overflow-hidden rounded-2xl border border-neutral-200 bg-white'><div class='flex flex-wrap items-center justify-between gap-4 bg-black p-8'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo-light.png' alt='Windcraft' class='h-7 w-auto'><div class='text-right'><p class='text-xs uppercase tracking-widest text-neutral-400'>Amount due</p><p class='text-3xl font-semibold text-white'>$686.40</p></div></div><div class='p-8'><p class='text-sm text-neutral-500'>INV-0042 · Due 26 Nov 2026</p><ul class='mt-6 divide-y divide-neutral-100 text-sm'><li class='flex justify-between py-3'><span class='text-black'>Design work, 12 hours</span><span class='text-neutral-700'>$600.00</span></li><li class='flex justify-between py-3'><span class='text-black'>Hosting</span><span class='text-neutral-700'>$24.00</span></li><li class='flex justify-between py-3'><span class='text-neutral-500'>Tax (10%)</span><span class='text-neutral-700'>$62.40</span></li></ul></div></div></section>

Invoice 02 · Minimal single column

A very plain invoice in one narrow column: heading, a few lines and a bold total. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-10'><div class='mx-auto max-w-md'><p class='text-sm text-neutral-500'>Invoice INV-0042</p><h1 class='mt-1 text-4xl font-semibold tracking-tight text-black'>$686.40</h1><p class='mt-1 text-sm text-neutral-500'>Due 26 Nov 2026</p><dl class='mt-8 divide-y divide-neutral-200 border-y border-neutral-200 text-sm'><div class='flex justify-between py-3'><dt class='text-neutral-600'>Design work (12 h)</dt><dd class='text-black'>$600.00</dd></div><div class='flex justify-between py-3'><dt class='text-neutral-600'>Hosting</dt><dd class='text-black'>$24.00</dd></div><div class='flex justify-between py-3'><dt class='text-neutral-600'>Tax (10%)</dt><dd class='text-black'>$62.40</dd></div></dl></div></section>

Invoice 01 · Classic invoice

A full invoice: logo and invoice number, bill-to block, line items table and totals. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-8'><div class='mx-auto max-w-3xl rounded-2xl border border-neutral-200 bg-white p-10'><div class='flex flex-wrap items-start justify-between gap-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-7 w-auto'><div class='text-right text-sm'><p class='text-2xl font-semibold text-black'>Invoice</p><p class='mt-1 text-neutral-500'>INV-0042 · 12 Nov 2026</p></div></div><div class='mt-10 grid gap-6 text-sm sm:grid-cols-2'><div><p class='font-semibold text-black'>From</p><p class='mt-1 text-neutral-600'>Sample Studio<br>12 Sample Street<br>Example City</p></div><div><p class='font-semibold text-black'>Bill to</p><p class='mt-1 text-neutral-600'>Northwind Ltd<br>34 Example Road<br>Sample Town</p></div></div><table class='mt-10 w-full text-left text-sm'><thead class='border-b border-neutral-200 text-neutral-500'><tr><th class='py-3 font-medium'>Item</th><th class='py-3 text-right font-medium'>Qty</th><th class='py-3 text-right font-medium'>Price</th><th class='py-3 text-right font-medium'>Amount</th></tr></thead><tbody class='divide-y divide-neutral-100 text-neutral-700'><tr><td class='py-3 text-black'>Design work</td><td class='py-3 text-right'>12</td><td class='py-3 text-right'>$50.00</td><td class='py-3 text-right'>$600.00</td></tr><tr><td class='py-3 text-black'>Hosting</td><td class='py-3 text-right'>1</td><td class='py-3 text-right'>$24.00</td><td class='py-3 text-right'>$24.00</td></tr></tbody></table><dl class='ml-auto mt-8 w-64 space-y-2 text-sm'><div class='flex justify-between text-neutral-600'><dt>Subtotal</dt><dd>$624.00</dd></div><div class='flex justify-between text-neutral-600'><dt>Tax (10%)</dt><dd>$62.40</dd></div><div class='flex justify-between border-t border-neutral-200 pt-3 text-base font-semibold text-black'><dt>Total</dt><dd>$686.40</dd></div></dl></div></section>