HTML code
This is the html code used to create this tailwind snippet
Download<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Invoice Receipt Email Template - Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="antialiased leading-relaxed text-sm font-sans bg-gray-100 w-full h-full">
<!-- Email Container -->
<table class="w-full bg-gray-100">
<tbody>
<tr>
<td></td>
<td class="max-w-[600px] w-[600px] mx-auto">
<div class="max-w-[600px] mx-auto block p-5">
<!-- Main Content Card -->
<table class="w-full bg-white border border-gray-200 rounded">
<tbody>
<tr>
<td class="p-5 text-center">
<table class="w-full">
<tbody>
<!-- Header -->
<tr>
<td class="pb-5">
<h2 class="text-2xl font-normal text-black my-0">Thanks for using our app</h2>
</td>
</tr>
<!-- Invoice Section -->
<tr>
<td class="pb-5">
<table class="mx-auto my-10 text-left w-4/5">
<tbody>
<!-- Customer Info -->
<tr>
<td class="py-1.5">
<span class="block">Anna Smith</span>
<span class="block">Invoice #12345</span>
<span class="block">June 01 2015</span>
</td>
</tr>
<!-- Invoice Items -->
<tr>
<td>
<table class="w-full">
<tbody>
<!-- Service 1 -->
<tr>
<td class="py-1.5 border-t border-gray-300">Service 1</td>
<td class="py-1.5 text-right border-t border-gray-300">$ 20.00</td>
</tr>
<!-- Service 2 -->
<tr>
<td class="py-1.5 border-t border-gray-300">Service 2</td>
<td class="py-1.5 text-right border-t border-gray-300">$ 10.00</td>
</tr>
<!-- Service 3 -->
<tr>
<td class="py-1.5 border-t border-gray-300">Service 3</td>
<td class="py-1.5 text-right border-t border-gray-300">$ 6.00</td>
</tr>
<!-- Total -->
<tr class="font-bold">
<td class="py-1.5 text-right border-t-2 border-b-2 border-gray-900 w-4/5">Total</td>
<td class="py-1.5 text-right border-t-2 border-b-2 border-gray-900">$ 36.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- View in Browser Link -->
<tr>
<td class="pb-5">
<a href="#" class="text-teal-600 underline hover:text-teal-700">View in browser</a>
</td>
</tr>
<!-- Company Info -->
<tr>
<td class="pb-5">
<span class="block">Company Inc. 123 Van Ness, San Francisco 94102</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Footer -->
<div class="w-full p-5 text-gray-600 text-xs">
<table class="w-full">
<tbody>
<tr>
<td class="text-center pb-5">
Questions? Email <a href="#" class="text-gray-600 underline hover:text-gray-700">[email protected]</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>