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>Company Invoice - Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="mt-5 bg-gray-50 text-gray-700">
<div class="container mx-auto px-4 max-w-6xl">
<!-- Page Header -->
<div class="flex justify-between items-center pb-4 pt-2 mb-4 border-b border-dotted border-gray-300">
<h1 class="text-3xl font-light text-[#728299] m-0 p-0">
Invoice
<small class="text-sm ml-2">
<svg class="inline-block w-3 h-3 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
<path d="M14.59 16.59L19.17 12 14.59 7.41 16 6l6 6-6 6-1.41-1.41z"/>
</svg>
ID: #111-222
</small>
</h1>
<div class="flex gap-1">
<a href="#" class="bg-white border border-gray-200 text-gray-700 px-3 py-2 text-sm hover:bg-gray-50 transition-colors flex items-center gap-2">
<svg class="w-5 h-5 text-[#4087d4]" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
</svg>
Print
</a>
<a href="#" class="bg-white border border-gray-200 text-gray-700 px-3 py-2 text-sm hover:bg-gray-50 transition-colors flex items-center gap-2">
<svg class="w-5 h-5 text-[#dd4949]" fill="currentColor" viewBox="0 0 24 24">
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
</svg>
Export
</a>
</div>
</div>
<div class="mt-4 px-0">
<div class="w-full">
<!-- Company Logo/Name -->
<div class="text-center text-2xl mb-4">
<svg class="inline-block w-8 h-8 mr-2 text-[#86bd68]" fill="currentColor" viewBox="0 0 24 24">
<path d="M18,22a2,2 0 0,0 2,-2V4a2,2 0 0,0 -2,-2H6A2,2 0 0,0 4,4V20a2,2 0 0,0 2,2H18M18,4V20H6V4H18M12,6L10.5,11H13.5L12,6M14.5,13H9.5L8.97,14.74L9.7,15.35L10.82,16L12,16.59L13.18,16L14.3,15.35L15.03,14.74L14.5,13Z"/>
</svg>
<span class="text-gray-800 font-medium">Bootdey.com</span>
</div>
<!-- Divider -->
<hr class="border-t border-[#dce9f0] -mx-1 mb-6" />
<!-- Billing Info -->
<div class="flex flex-wrap -mx-3">
<div class="w-full sm:w-1/2 px-3 mb-4 sm:mb-0">
<div class="mb-2">
<span class="text-sm text-[#888a8d] align-middle">To:</span>
<span class="font-semibold text-lg text-[#478fcc] align-middle ml-1">Alex Doe</span>
</div>
<div class="text-[#888a8d]">
<div class="my-1">
Street, City
</div>
<div class="my-1">
State, Country
</div>
<div class="my-1">
<svg class="inline-block w-4 h-4 text-gray-500 -scale-x-100" fill="currentColor" viewBox="0 0 24 24">
<path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z"/>
</svg>
<b class="font-semibold ml-1">111-111-111</b>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 px-3 text-sm sm:flex sm:justify-end">
<hr class="sm:hidden mb-4" />
<div class="text-[#888a8d]">
<div class="mt-1 mb-2 text-[#728299] font-semibold text-lg">
Invoice
</div>
<div class="my-2">
<svg class="inline-block w-2 h-2 text-[#68a3d5] mr-1" fill="currentColor" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
</svg>
<span class="font-semibold text-sm">ID:</span> #111-222
</div>
<div class="my-2">
<svg class="inline-block w-2 h-2 text-[#68a3d5] mr-1" fill="currentColor" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
</svg>
<span class="font-semibold text-sm">Issue Date:</span> Oct 12, 2019
</div>
<div class="my-2">
<svg class="inline-block w-2 h-2 text-[#68a3d5] mr-1" fill="currentColor" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
</svg>
<span class="font-semibold text-sm">Status:</span>
<span class="inline-block bg-yellow-500 text-white text-xs font-medium px-3 py-1 rounded-full ml-1">Unpaid</span>
</div>
</div>
</div>
</div>
<!-- Invoice Items Table -->
<div class="mt-6">
<!-- Header Row -->
<div class="flex text-white font-semibold py-3 px-2" style="background-color: rgba(121,169,197,.92);">
<div class="hidden sm:block w-1/12">#</div>
<div class="w-9/12 sm:w-5/12">Description</div>
<div class="hidden sm:block sm:w-2/12">Qty</div>
<div class="hidden sm:block sm:w-2/12">Unit Price</div>
<div class="w-3/12 sm:w-2/12">Amount</div>
</div>
<!-- Items -->
<div class="text-sm text-gray-700">
<!-- Item 1 -->
<div class="flex py-3 px-2 mb-2 sm:mb-0">
<div class="hidden sm:block w-1/12">1</div>
<div class="w-9/12 sm:w-5/12">Domain registration</div>
<div class="hidden sm:block sm:w-2/12">2</div>
<div class="hidden sm:block sm:w-2/12 text-sm">$10</div>
<div class="w-3/12 sm:w-2/12 text-gray-800">$20</div>
</div>
<!-- Item 2 -->
<div class="flex py-3 px-2 mb-2 sm:mb-0 bg-[#f3f8fa]">
<div class="hidden sm:block w-1/12">2</div>
<div class="w-9/12 sm:w-5/12">Web hosting</div>
<div class="hidden sm:block sm:w-2/12">1</div>
<div class="hidden sm:block sm:w-2/12 text-sm">$15</div>
<div class="w-3/12 sm:w-2/12 text-gray-800">$15</div>
</div>
<!-- Item 3 -->
<div class="flex py-3 px-2 mb-2 sm:mb-0">
<div class="hidden sm:block w-1/12">3</div>
<div class="w-9/12 sm:w-5/12">Software development</div>
<div class="hidden sm:block sm:w-2/12">--</div>
<div class="hidden sm:block sm:w-2/12 text-sm">$1,000</div>
<div class="w-3/12 sm:w-2/12 text-gray-800">$1,000</div>
</div>
<!-- Item 4 -->
<div class="flex py-3 px-2 mb-2 sm:mb-0 bg-[#f3f8fa]">
<div class="hidden sm:block w-1/12">4</div>
<div class="w-9/12 sm:w-5/12">Consulting</div>
<div class="hidden sm:block sm:w-2/12">1 Year</div>
<div class="hidden sm:block sm:w-2/12 text-sm">$500</div>
<div class="w-3/12 sm:w-2/12 text-gray-800">$500</div>
</div>
</div>
<div class="border-b-2 border-[#dce9f0]"></div>
<!-- Total Section -->
<div class="flex flex-wrap mt-3">
<div class="w-full sm:w-7/12 text-[#7b7d81] text-sm mt-2 lg:mt-0 order-2 sm:order-1">
Extra note such as company or payment information...
</div>
<div class="w-full sm:w-5/12 text-gray-600 text-sm order-1 sm:order-2 mb-4 sm:mb-0">
<div class="flex my-2">
<div class="w-7/12 text-right pr-4">
SubTotal
</div>
<div class="w-5/12">
<span class="text-lg text-gray-800">$2,250</span>
</div>
</div>
<div class="flex my-2">
<div class="w-7/12 text-right pr-4">
Tax (10%)
</div>
<div class="w-5/12">
<span class="text-base text-gray-800">$225</span>
</div>
</div>
<div class="flex my-2 items-center bg-blue-100 p-2">
<div class="w-7/12 text-right pr-4">
Total Amount
</div>
<div class="w-5/12">
<span class="text-2xl text-green-700 font-semibold">$2,475</span>
</div>
</div>
</div>
</div>
<hr class="my-4" />
<!-- Footer -->
<div class="flex justify-between items-center flex-wrap">
<span class="text-[#728299] text-lg">Thank you for your business</span>
<a href="#" class="bg-[#17a2b8] hover:bg-[#138496] text-white font-semibold px-6 py-2 rounded mt-3 lg:mt-0 transition-colors">Pay Now</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>