simple invoice receipt email template

Ready-to-use simple invoice receipt email template using Tailwind utility classes. No dependencies, no setup—just grab the code and ship.

HTML code

This is the html code used to create this tailwind snippet

<!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>