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 Receipt - Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="receipt-content">
<div class="container mx-auto px-4 max-w-[900px]">
<div class="flex">
<div class="w-full">
<!-- Logo -->
<div class="text-center mt-12">
<a href="#" class="text-4xl text-gray-600 font-light tracking-wide transition-colors duration-200 hover:text-blue-400">
Company Name
</a>
</div>
<!-- Invoice Wrapper -->
<div class="bg-white border border-gray-300 shadow-sm px-10 pt-10 pb-16 mt-10 rounded">
<!-- Intro -->
<div class="leading-relaxed text-gray-700">
Hi <strong>John McClane</strong>,
<br>
This is the receipt for a payment of <strong>$312.00</strong> (USD) for your works
</div>
<!-- Payment Info -->
<div class="mt-6 pt-4">
<div class="flex flex-col md:flex-row md:justify-between gap-5">
<div>
<span class="block text-gray-500">Payment No.</span>
<strong class="block text-gray-700">434334343</strong>
</div>
<div class="md:text-right">
<span class="block text-gray-500">Payment Date</span>
<strong class="block text-gray-700">Jul 09, 2014 - 12:20 pm</strong>
</div>
</div>
</div>
<!-- Payment Details -->
<div class="border-t-2 border-gray-200 mt-8 pt-5 leading-snug">
<div class="flex flex-col md:flex-row md:justify-between gap-5">
<div>
<span class="block text-gray-500">Client</span>
<strong class="block text-gray-700">
Andres felipe posada
</strong>
<p class="mt-1 text-gray-700">
989 5th Avenue<br>
City of monterrey<br>
55839<br>
USA<br>
<a href="#" class="text-blue-600 hover:underline">
[email protected]
</a>
</p>
</div>
<div class="md:text-right">
<span class="block text-gray-500">Payment To</span>
<strong class="block text-gray-700">
Juan fernando arias
</strong>
<p class="mt-1 text-gray-700">
344 9th Avenue<br>
San Francisco<br>
99383<br>
USA<br>
<a href="#" class="text-blue-600 hover:underline">
[email protected]
</a>
</p>
</div>
</div>
</div>
<!-- Line Items -->
<div class="mt-10">
<!-- Headers -->
<div class="text-gray-500 text-sm tracking-wide border-b-2 border-gray-200 pb-1">
<div class="flex">
<div class="w-5/12 md:w-4/12">Description</div>
<div class="w-3/12">Quantity</div>
<div class="w-4/12 md:w-5/12 text-right">Amount</div>
</div>
</div>
<!-- Items -->
<div class="mt-2 border-b-2 border-gray-200 pb-2">
<div class="flex py-2 text-gray-600 text-base">
<div class="w-5/12 md:w-4/12 text-sm md:text-base">
Html theme
</div>
<div class="w-3/12 text-sm md:text-base">
3
</div>
<div class="w-4/12 md:w-5/12 text-right text-gray-500 text-sm md:text-base">
$60.00
</div>
</div>
<div class="flex py-2 text-gray-600 text-base">
<div class="w-5/12 md:w-4/12 text-sm md:text-base">
Bootstrap snippet
</div>
<div class="w-3/12 text-sm md:text-base">
1
</div>
<div class="w-4/12 md:w-5/12 text-right text-gray-500 text-sm md:text-base">
$20.00
</div>
</div>
<div class="flex py-2 text-gray-600 text-base">
<div class="w-5/12 md:w-4/12 text-sm md:text-base">
Snippets on bootdey
</div>
<div class="w-3/12 text-sm md:text-base">
2
</div>
<div class="w-4/12 md:w-5/12 text-right text-gray-500 text-sm md:text-base">
$18.00
</div>
</div>
</div>
<!-- Total -->
<div class="mt-8 flex flex-col md:flex-row md:justify-between gap-8">
<!-- Extra Notes -->
<div class="w-full md:w-2/5 text-sm text-gray-600 leading-5">
<strong class="block mb-1 text-gray-700">Extra Notes</strong>
Please send all items at the same time to shipping address by next week.
Thanks a lot.
</div>
<!-- Totals -->
<div class="w-full md:w-auto md:flex-shrink-0">
<div class="mb-2 text-sm text-gray-600">
Subtotal <span class="inline-block ml-5 min-w-[85px] text-gray-500 text-base">$379.00</span>
</div>
<div class="mb-2 text-sm text-gray-600">
Shipping <span class="inline-block ml-5 min-w-[85px] text-gray-500 text-base">$0.00</span>
</div>
<div class="mb-2 text-sm text-gray-600">
Discount <span class="inline-block ml-5 min-w-[85px] text-gray-500 text-base">4.5%</span>
</div>
<div class="mt-2 text-base font-medium text-gray-600">
Total <span class="inline-block ml-5 min-w-[85px] text-green-600 text-base">$312.00</span>
</div>
</div>
</div>
<!-- Print Button -->
<div class="mt-12 text-center">
<a href="#" class="inline-block border border-blue-300 px-3 py-3 rounded text-blue-500 text-sm transition-all duration-200 hover:border-gray-800 hover:text-gray-800">
<svg class="inline-block w-4 h-4 mr-1 -mt-0.5" fill="currentColor" viewBox="0 0 24 24">
<path d="M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z"/>
</svg>
Print this receipt
</a>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-10 mb-28 text-center text-xs text-gray-500">
Copyright © 2014. company name
</div>
</div>
</div>
</div>
</div>
</body>
</html>