<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice</title>
<!-- Include Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto py-8">
<!-- Header -->
<header class="text-center">
<h1 class="text-3xl font-bold text-gray-800">Invoice</h1>
<div class="mt-4">
<p class="text-gray-600">Company Name</p>
<p class="text-gray-600">123 Main Street, City, State, ZIP</p>
<p class="text-gray-600">Email: [email protected]</p>
<p class="text-gray-600">Phone: +1 (123) 456-7890</p>
</div>
</header>
<!-- Main Content -->
<main class="my-8">
<!-- Invoice Information -->
<section class="flex justify-between mb-8">
<div>
<p class="font-semibold">Invoice Number:</p>
<p>INV-2024001</p>
</div>
<div>
<p class="font-semibold">Invoice Date:</p>
<p>June 16, 2024</p>
</div>
<div>
<p class="font-semibold">Billed To:</p>
<p>Client Name</p>
<p>456 Business Avenue, City, State, ZIP</p>
<p>Email: [email protected]</p>
<p>Phone: +1 (987) 654-3210</p>
</div>
</section>
<!-- Invoice Details -->
<section class="mb-8">
<table class="w-full border-collapse border border-gray-300">
<thead class="bg-gray-200">
<tr>
<th class="border border-gray-300 py-2 px-4">Description</th>
<th class="border border-gray-300 py-2 px-4">Quantity</th>
<th class="border border-gray-300 py-2 px-4">Unit Price</th>
<th class="border border-gray-300 py-2 px-4">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300 py-2 px-4">Service Name or Product Description</td>
<td class="border border-gray-300 py-2 px-4">1</td>
<td class="border border-gray-300 py-2 px-4">$100.00</td>
<td class="border border-gray-300 py-2 px-4">$100.00</td>
</tr>
<!-- Add more rows as necessary -->
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right border border-gray-300 py-2 px-4 font-semibold">Subtotal:</td>
<td class="border border-gray-300 py-2 px-4">$100.00</td>
</tr>
<tr>
<td colspan="3" class="text-right border border-gray-300 py-2 px-4 font-semibold">Tax (10%):</td>
<td class="border border-gray-300 py-2 px-4">$10.00</td>
</tr>
<tr>
<td colspan="3" class="text-right border border-gray-300 py-2 px-4 font-semibold">Total:</td>
<td class="border border-gray-300 py-2 px-4">$110.00</td>
</tr>
</tfoot>
</table>
</section>
</main>
<!-- Footer -->
<footer class="text-center text-gray-600 mt-8">
<p class="text-sm">Payment is due within 30 days. Late payments are subject to a 1.5% interest charge per month.</p>
</footer>
</div>
</body>
</html>