Templates
Invoices with Tailwind CSS
Templates
Invoices with Tailwind CSS
Generate invoice PDFs based on templates with the “htmlTemplate” option.
From contracts and invoices to social media banners,
leverage our the htmlTemplate option for swift document generation.
The htmlTemplate uses Handlebars
to render your HTML together with the provided templateData.
See the PDF endpoint for all available options.
Example
This example generates an invoice PDF using Tailwind CSS.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {}
}
}
}
</script>
</head>
<body>
<div class="max-w-5xl mx-auto bg-white">
<article class="overflow-hidden">
<div class="bg-[white] rounded-b-md">
<div class="p-9">
<div class="space-y-6 text-slate-700">
<img class="object-cover h-12"
src="https://assets.doczilla.app/examples/invoice-example-logo.png">
<p class="text-xl font-extrabold tracking-tight uppercase font-body">
Doczilla example
</p>
</div>
</div>
<div class="p-9">
<div class="flex w-full">
<div class="grid grid-cols-4 gap-12">
<div class="text-sm font-light text-slate-500">
<p class="text-sm font-normal text-slate-700">
Invoice Detail:
</p>
<p>Doczilla example</p>
<p>Fake Street 123</p>
<p>Amsterdam</p>
<p>4321 AA</p>
</div>
<div class="text-sm font-light text-slate-500">
<p class="text-sm font-normal text-slate-700">Billed To</p>
<p>{{ debtor.name }}</p>
<p>{{ debtor.address }}</p>
<p>{{ debtor.city }}</p>
<p>{{ debtor.zipcode }}</p>
</div>
<div class="text-sm font-light text-slate-500">
<p class="text-sm font-normal text-slate-700">Invoice Number</p>
<p>{{ number }}</p>
<p class="mt-2 text-sm font-normal text-slate-700">
Date of Issue
</p>
<p>
{{ date }}
</p>
</div>
<div class="text-sm font-light text-slate-500">
<p class="text-sm font-normal text-slate-700">Terms</p>
<p>{{ terms }} Days</p>
<p class="mt-2 text-sm font-normal text-slate-700">Due</p>
<p>{{ dueDate }}</p>
</div>
</div>
</div>
</div>
<div class="p-9">
<div class="flex flex-col mx-0 mt-8">
<table class="min-w-full divide-y divide-slate-500">
<thead>
<tr>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-normal text-slate-700 sm:pl-6 md:pl-0">
Description
</th>
<th scope="col" class="hidden py-3.5 px-3 text-right text-sm font-normal text-slate-700 sm:table-cell">
Quantity
</th>
<th scope="col" class="hidden py-3.5 px-3 text-right text-sm font-normal text-slate-700 sm:table-cell">
Rate
</th>
<th scope="col" class="py-3.5 pl-3 pr-4 text-right text-sm font-normal text-slate-700 sm:pr-6 md:pr-0">
Amount
</th>
</tr>
</thead>
<tbody>
{{#each lines}}
<tr class="border-b border-slate-200">
<td class="py-4 pl-4 pr-3 text-sm sm:pl-6 md:pl-0">
<div class="font-medium text-slate-700">{{ description }}</div>
</td>
<td class="hidden px-3 py-4 text-sm text-right text-slate-500 sm:table-cell">
{{ quantity }}
</td>
<td class="hidden px-3 py-4 text-sm text-right text-slate-500 sm:table-cell">
{{ rate }}
</td>
<td class="py-4 pl-3 pr-4 text-sm text-right text-slate-500 sm:pr-6 md:pr-0">
${{ amount }}
</td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="3"
class="hidden pt-6 pl-6 pr-3 text-sm font-light text-right text-slate-500 sm:table-cell md:pl-0">
Subtotal
</th>
<td class="pt-6 pl-3 pr-4 text-sm text-right text-slate-500 sm:pr-6 md:pr-0">
${{ subtotal }}
</td>
</tr>
{{#if discount}}
<tr>
<th scope="row" colspan="3"
class="hidden pt-6 pl-6 pr-3 text-sm font-light text-right text-slate-500 sm:table-cell md:pl-0">
Discount
</th>
<td class="pt-6 pl-3 pr-4 text-sm text-right text-slate-500 sm:pr-6 md:pr-0">
${{ discount }}
</td>
</tr>
{{/if}}
<tr>
<th scope="row" colspan="3"
class="hidden pt-4 pl-6 pr-3 text-sm font-light text-right text-slate-500 sm:table-cell md:pl-0">
Tax
</th>
<td class="pt-4 pl-3 pr-4 text-sm text-right text-slate-500 sm:pr-6 md:pr-0">
${{ tax }}
</td>
</tr>
<tr>
<th scope="row" colspan="3"
class="hidden pt-4 pl-6 pr-3 text-sm font-normal text-right text-slate-700 sm:table-cell md:pl-0">
Total
</th>
<td class="pt-4 pl-3 pr-4 text-sm font-normal text-right text-slate-700 sm:pr-6 md:pr-0">
${{ total }}
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="mt-48 p-9">
<div class="border-t pt-9 border-slate-200">
<div class="text-sm font-light text-slate-700">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lacinia purus. Vivamus quis
ultrices leo. Pellentesque eget volutpat nulla. Etiam orci metus, rhoncus vel purus in, convallis
fringilla urna. Aliquam ac ante mollis, auctor odio ac, feugiat nisl.
</p>
</div>
</div>
</div>
</div>
</article>
</div>
</body>
</html>
Output
Was this page helpful?