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>Invoice with Client Info - Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="mt-5 bg-[#87CEFA]">
<div class="container mx-auto mt-12 mb-14 px-4">
<div class="flex justify-center">
<div class="w-full lg:w-full xl:w-7/12">
<div class="bg-white border border-gray-200 rounded shadow-[0_20px_27px_0_rgba(0,0,0,0.05)]">
<div class="p-12">
<h2 class="text-2xl font-semibold mb-2">
Hey Anna,
</h2>
<p class="text-sm text-gray-600">
This is the receipt for a payment of <strong>$312.00</strong> (USD) you made to Spacial Themes.
</p>
<div class="border-t border-gray-200 pt-4 mt-4">
<div class="flex flex-wrap -mx-2">
<div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
<div class="text-gray-500 mb-2 text-sm">Payment No.</div>
<strong class="text-gray-900">#88305</strong>
</div>
<div class="w-full md:w-1/2 px-2 md:text-right">
<div class="text-gray-500 mb-2 text-sm">Payment Date</div>
<strong class="text-gray-900">Feb/09/20</strong>
</div>
</div>
</div>
<div class="border-t border-gray-200 mt-4 py-4">
<div class="flex flex-wrap -mx-2">
<div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
<div class="text-gray-500 mb-2 text-sm">Client</div>
<strong class="text-gray-900 block">
John McClane
</strong>
<p class="text-sm text-gray-600 mt-1">
989 5th Avenue, New York, 55832
<br>
<a href="#" class="text-purple-600 hover:text-purple-700">[email protected]</a>
</p>
</div>
<div class="w-full md:w-1/2 px-2 md:text-right">
<div class="text-gray-500 mb-2 text-sm">Payment To</div>
<strong class="text-gray-900 block">
Themes LLC
</strong>
<p class="text-sm text-gray-600 mt-1">
9th Avenue, San Francisco 99383
<br>
<a href="#" class="text-purple-600 hover:text-purple-700">[email protected]</a>
</p>
</div>
</div>
</div>
<table class="w-full border-b border-gray-200 mt-3">
<thead>
<tr>
<th class="text-left text-sm text-gray-900 uppercase font-medium tracking-[2px] px-0 py-4 align-middle">Description</th>
<th class="text-right text-sm text-gray-900 uppercase font-medium tracking-[2px] px-0 py-4 align-middle">Amount</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-gray-200">
<td class="px-0 py-4 align-middle">Theme customization</td>
<td class="text-right px-0 py-4 align-middle">$60.00</td>
</tr>
<tr class="border-t border-gray-200">
<td class="px-0 py-4 align-middle">Website design</td>
<td class="text-right px-0 py-4 align-middle">$80.00</td>
</tr>
</tbody>
</table>
<div class="mt-12">
<div class="flex justify-end items-center mb-2">
<p class="text-gray-500 mr-3 mb-0">Subtotal:</p>
<span class="text-gray-900">$390.00</span>
</div>
<div class="flex justify-end items-center mb-2">
<p class="text-gray-500 mr-3 mb-0">Discount:</p>
<span class="text-gray-900">-$40.00</span>
</div>
<div class="flex justify-end items-center mt-3">
<h5 class="text-lg font-semibold mr-3 mb-0">Total:</h5>
<h5 class="text-lg font-semibold text-green-600 mb-0">$399.99 USD</h5>
</div>
</div>
</div>
<a href="#" class="flex items-center justify-center bg-[#1e2e50] hover:bg-[#172340] text-white text-base font-medium tracking-[2px] uppercase py-4 px-7 rounded-b transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5">
<span class="inline-block w-6 h-6 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-full h-full" fill="none" stroke="currentColor" stroke-width="32" stroke-linecap="round" stroke-linejoin="round">
<path d="M336,208V113a80,80,0,0,0-160,0v95"></path>
<rect x="96" y="208" width="320" height="272" rx="48" ry="48"></rect>
</svg>
</span>
Pay Now
</a>
</div>
</div>
</div>
</div>
</body>
</html>