Application Invoice
Quickly get a project started with any of our examples ranging from using parts of the UI to custom components and layouts using Tailwind CSS.
Modal
<div class="text-center">
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" data-hs-overlay="#hs-ai-modal">
Open modal
</button>
</div>
<!-- Modal -->
<div id="hs-ai-modal" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
<div class="relative flex flex-col bg-white shadow-lg rounded-xl dark:bg-gray-800">
<div class="relative overflow-hidden min-h-[8rem] bg-gray-900 text-center rounded-t-xl">
<!-- Close Button -->
<div class="absolute top-2 right-2">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-sm dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800" data-hs-overlay="#hs-bg-gray-on-hover-cards">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
</svg>
</button>
</div>
<!-- End Close Button -->
<!-- SVG Background Element -->
<figure class="absolute inset-x-0 bottom-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="currentColor" class="fill-white dark:fill-gray-800" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
</svg>
</figure>
<!-- End SVG Background Element -->
</div>
<div class="relative z-10 -mt-12">
<!-- Icon -->
<span class="mx-auto flex justify-center items-center w-[62px] h-[62px] rounded-full border border-gray-200 bg-white text-gray-700 shadow-sm dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z"/>
<path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
<!-- End Icon -->
</div>
<!-- Body -->
<div class="p-4 sm:p-7 overflow-y-auto">
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
Invoice from Preline
</h3>
<p class="text-sm text-gray-500">
Invoice #3682303
</p>
</div>
<!-- Grid -->
<div class="mt-5 sm:mt-10 grid grid-cols-2 sm:grid-cols-3 gap-5">
<div>
<span class="block text-xs uppercase text-gray-500">Amount paid:</span>
<span class="block text-sm font-medium text-gray-800 dark:text-gray-200">$316.8</span>
</div>
<!-- End Col -->
<div>
<span class="block text-xs uppercase text-gray-500">Date paid:</span>
<span class="block text-sm font-medium text-gray-800 dark:text-gray-200">April 22, 2020</span>
</div>
<!-- End Col -->
<div>
<span class="block text-xs uppercase text-gray-500">Payment method:</span>
<div class="flex items-center gap-x-2">
<svg class="w-5 h-5" width="400" height="248" viewBox="0 0 400 248" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M254 220.8H146V26.4H254V220.8Z" fill="#FF5F00"/>
<path d="M152.8 123.6C152.8 84.2 171.2 49 200 26.4C178.2 9.2 151.4 0 123.6 0C55.4 0 0 55.4 0 123.6C0 191.8 55.4 247.2 123.6 247.2C151.4 247.2 178.2 238 200 220.8C171.2 198.2 152.8 163 152.8 123.6Z" fill="#EB001B"/>
<path d="M400 123.6C400 191.8 344.6 247.2 276.4 247.2C248.6 247.2 221.8 238 200 220.8C228.8 198.2 247.2 163 247.2 123.6C247.2 84.2 228.8 49 200 26.4C221.8 9.2 248.6 0 276.4 0C344.6 0 400 55.4 400 123.6Z" fill="#F79E1B"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="400" height="247.2" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="block text-sm font-medium text-gray-800 dark:text-gray-200">•••• 4242</span>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
<div class="mt-5 sm:mt-10">
<h4 class="text-xs font-semibold uppercase text-gray-800 dark:text-gray-200">Summary</h4>
<ul class="mt-3 flex flex-col">
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-gray-700 dark:text-gray-200">
<div class="flex items-center justify-between w-full">
<span>Payment to Front</span>
<span>$264.00</span>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-gray-700 dark:text-gray-200">
<div class="flex items-center justify-between w-full">
<span>Tax fee</span>
<span>$52.8</span>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-gray-50 border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-slate-800 dark:border-gray-700 dark:text-gray-200">
<div class="flex items-center justify-between w-full">
<span>Amount paid</span>
<span>$316.8</span>
</div>
</li>
</ul>
</div>
<!-- Button -->
<div class="mt-5 flex justify-end gap-x-2">
<a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
Invoice PDF
</a>
<a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2H5zm6 8H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1z"/>
<path d="M0 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2H2a2 2 0 0 1-2-2V7zm2.5 1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
</svg>
Print
</a>
</div>
<!-- End Buttons -->
<div class="mt-5 sm:mt-10">
<p class="text-sm text-gray-500">If you have any questions, please contact us at <a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium" href="#">example@site.com</a> or call at <a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium" href="tel:+1898345492">+1 898-34-5492</a></p>
</div>
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- End Modal -->
Offcanvas
<!-- Invoice -->
<div class="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
<div class="text-center">
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" data-hs-overlay="#hs-ai-offcanvas">
Open offcanvas
</button>
</div>
<div id="hs-ai-offcanvas" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 right-0 transition-all duration-300 transform h-full max-w-md w-full z-[60] bg-white border-r dark:bg-gray-800 dark:border-gray-700" tabindex="-1">
<div class="relative overflow-hidden min-h-[8rem] text-center bg-[url('../svg/component/abstract-bg-1.svg')] bg-no-repeat bg-center">
<!-- Close Button -->
<div class="absolute top-2 right-2">
<button type="button" class="py-1.5 px-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-xs dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-overlay="#hs-ai-offcanvas">
Close
</button>
</div>
<!-- End Close Button -->
<!-- SVG Background Element -->
<figure class="absolute inset-x-0 bottom-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="currentColor" class="fill-white dark:fill-gray-800" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
</svg>
</figure>
<!-- End SVG Background Element -->
</div>
<div class="relative z-10 -mt-12">
<!-- Icon -->
<span class="mx-auto flex justify-center items-center w-[62px] h-[62px] rounded-full border border-gray-200 bg-white text-gray-700 shadow-sm dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z"/>
<path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
<!-- End Icon -->
</div>
<!-- Body -->
<div class="p-4 sm:p-7 overflow-y-auto">
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
Invoice from Preline
</h3>
<p class="text-sm text-gray-500">
Invoice #3682303
</p>
</div>
<!-- Grid -->
<div class="mt-5 sm:mt-10 grid grid-cols-2 sm:grid-cols-3 gap-5">
<div>
<span class="block text-xs uppercase text-gray-500">Amount paid:</span>
<span class="block text-sm font-medium text-gray-800 dark:text-gray-200">$316.8</span>
</div>
<!-- End Col -->
<div>
<span class="block text-xs uppercase text-gray-500">Date paid:</span>
<span class="block text-sm font-medium text-gray-800 dark:text-gray-200">April 22, 2020</span>
</div>
<!-- End Col -->
<div>
<span class="block text-xs uppercase text-gray-500">Payment method:</span>
<div class="flex items-center gap-x-2">
<svg class="w-5 h-5" width="400" height="248" viewBox="0 0 400 248" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M254 220.8H146V26.4H254V220.8Z" fill="#FF5F00"/>
<path d="M152.8 123.6C152.8 84.2 171.2 49 200 26.4C178.2 9.2 151.4 0 123.6 0C55.4 0 0 55.4 0 123.6C0 191.8 55.4 247.2 123.6 247.2C151.4 247.2 178.2 238 200 220.8C171.2 198.2 152.8 163 152.8 123.6Z" fill="#EB001B"/>
<path d="M400 123.6C400 191.8 344.6 247.2 276.4 247.2C248.6 247.2 221.8 238 200 220.8C228.8 198.2 247.2 163 247.2 123.6C247.2 84.2 228.8 49 200 26.4C221.8 9.2 248.6 0 276.4 0C344.6 0 400 55.4 400 123.6Z" fill="#F79E1B"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="400" height="247.2" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="block text-sm font-medium text-gray-800 dark:text-gray-200">•••• 4242</span>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
<div class="mt-5 sm:mt-10">
<h4 class="text-xs font-semibold uppercase text-gray-800 dark:text-gray-200">Summary</h4>
<ul class="mt-3 flex flex-col">
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-gray-700 dark:text-gray-200">
<div class="flex items-center justify-between w-full">
<span>Payment to Front</span>
<span>$264.00</span>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-gray-700 dark:text-gray-200">
<div class="flex items-center justify-between w-full">
<span>Tax fee</span>
<span>$52.8</span>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-gray-50 border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-slate-800 dark:border-gray-700 dark:text-gray-200">
<div class="flex items-center justify-between w-full">
<span>Amount paid</span>
<span>$316.8</span>
</div>
</li>
</ul>
</div>
<!-- Button -->
<div class="mt-5 flex justify-end gap-x-2">
<a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
Invoice PDF
</a>
<a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2H5zm6 8H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1z"/>
<path d="M0 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2H2a2 2 0 0 1-2-2V7zm2.5 1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
</svg>
Print
</a>
</div>
<!-- End Buttons -->
<div class="mt-5 sm:mt-10">
<p class="text-sm text-gray-500">If you have any questions, please contact us at <a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium" href="#">example@site.com</a> or call at <a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium" href="tel:+1898345492">+1 898-34-5492</a></p>
</div>
</div>
<!-- End Body -->
</div>
</div>
<!-- End Invoice -->
Simple and Compact
<!-- Invoice -->
<div class="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
<!-- Grid -->
<div class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Invoice</h2>
</div>
<!-- Col -->
<div class="inline-flex gap-x-2">
<a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
Invoice PDF
</a>
<a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2H5zm6 8H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1z"/>
<path d="M0 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2H2a2 2 0 0 1-2-2V7zm2.5 1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
</svg>
Print
</a>
</div>
<!-- Col -->
</div>
<!-- End Grid -->
<!-- Grid -->
<div class="grid md:grid-cols-2 gap-3">
<div>
<div class="grid space-y-3">
<dl class="grid sm:flex gap-x-3 text-sm">
<dt class="min-w-[150px] max-w-[200px] text-gray-500">
Billed to:
</dt>
<dd class="text-gray-800 dark:text-gray-200">
<a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium" href="#">
sara@site.com
</a>
</dd>
</dl>
<dl class="grid sm:flex gap-x-3 text-sm">
<dt class="min-w-[150px] max-w-[200px] text-gray-500">
Billing details:
</dt>
<dd class="font-medium text-gray-800 dark:text-gray-200">
<span class="block font-semibold">Sara Williams</span>
<address class="not-italic font-normal">
280 Suzanne Throughway,<br>
Breannabury, OR 45801,<br>
United States<br>
</address>
</dd>
</dl>
<dl class="grid sm:flex gap-x-3 text-sm">
<dt class="min-w-[150px] max-w-[200px] text-gray-500">
Shipping details:
</dt>
<dd class="font-medium text-gray-800 dark:text-gray-200">
<span class="block font-semibold">Sara Williams</span>
<address class="not-italic font-normal">
280 Suzanne Throughway,<br>
Breannabury, OR 45801,<br>
United States<br>
</address>
</dd>
</dl>
</div>
</div>
<!-- Col -->
<div>
<div class="grid space-y-3">
<dl class="grid sm:flex gap-x-3 text-sm">
<dt class="min-w-[150px] max-w-[200px] text-gray-500">
Invoice number:
</dt>
<dd class="font-medium text-gray-800 dark:text-gray-200">
ADUQ2189H1-0038
</dd>
</dl>
<dl class="grid sm:flex gap-x-3 text-sm">
<dt class="min-w-[150px] max-w-[200px] text-gray-500">
Currency:
</dt>
<dd class="font-medium text-gray-800 dark:text-gray-200">
USD - US Dollar
</dd>
</dl>
<dl class="grid sm:flex gap-x-3 text-sm">
<dt class="min-w-[150px] max-w-[200px] text-gray-500">
Due date:
</dt>
<dd class="font-medium text-gray-800 dark:text-gray-200">
10 Jan 2023
</dd>
</dl>
<dl class="grid sm:flex gap-x-3 text-sm">
<dt class="min-w-[150px] max-w-[200px] text-gray-500">
Billing method:
</dt>
<dd class="font-medium text-gray-800 dark:text-gray-200">
Send invoice
</dd>
</dl>
</div>
</div>
<!-- Col -->
</div>
<!-- End Grid -->
<!-- Table -->
<div class="mt-6 border border-gray-200 p-4 rounded-lg space-y-4 dark:border-gray-700">
<div class="hidden sm:grid sm:grid-cols-5">
<div class="sm:col-span-2 text-xs font-medium text-gray-500 uppercase">Item</div>
<div class="text-left text-xs font-medium text-gray-500 uppercase">Qty</div>
<div class="text-left text-xs font-medium text-gray-500 uppercase">Rate</div>
<div class="text-right text-xs font-medium text-gray-500 uppercase">Amount</div>
</div>
<div class="hidden sm:block border-b border-gray-200 dark:border-gray-700"></div>
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
<div class="col-span-full sm:col-span-2">
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Item</h5>
<p class="font-medium text-gray-800 dark:text-gray-200">Design UX and UI</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Qty</h5>
<p class="text-gray-800 dark:text-gray-200">1</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Rate</h5>
<p class="text-gray-800 dark:text-gray-200">5</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Amount</h5>
<p class="sm:text-right text-gray-800 dark:text-gray-200">$500</p>
</div>
</div>
<div class="sm:hidden border-b border-gray-200 dark:border-gray-700"></div>
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
<div class="col-span-full sm:col-span-2">
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Item</h5>
<p class="font-medium text-gray-800 dark:text-gray-200">Web project</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Qty</h5>
<p class="text-gray-800 dark:text-gray-200">1</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Rate</h5>
<p class="text-gray-800 dark:text-gray-200">24</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Amount</h5>
<p class="sm:text-right text-gray-800 dark:text-gray-200">$1250</p>
</div>
</div>
<div class="sm:hidden border-b border-gray-200 dark:border-gray-700"></div>
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
<div class="col-span-full sm:col-span-2">
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Item</h5>
<p class="font-medium text-gray-800 dark:text-gray-200">SEO</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Qty</h5>
<p class="text-gray-800 dark:text-gray-200">1</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Rate</h5>
<p class="text-gray-800 dark:text-gray-200">6</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Amount</h5>
<p class="sm:text-right text-gray-800 dark:text-gray-200">$2000</p>
</div>
</div>
</div>
<!-- End Table -->
<!-- Flex -->
<div class="mt-8 flex sm:justify-end">
<div class="w-full max-w-2xl sm:text-right space-y-2">
<!-- Grid -->
<div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500">Subotal:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-gray-200">$2750.00</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500">Total:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-gray-200">$2750.00</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500">Tax:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-gray-200">$39.00</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500">Amount paid:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-gray-200">$2789.00</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500">Due balance:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-gray-200">$0.00</dd>
</dl>
</div>
<!-- End Grid -->
</div>
</div>
<!-- End Flex -->
</div>
<!-- End Invoice -->
In Card
<body class="bg-gray-50 dark:bg-slate-900">
<!-- Invoice -->
<div class="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
<div class="sm:w-11/12 lg:w-3/4 mx-auto">
<!-- Card -->
<div class="flex flex-col p-4 sm:p-10 bg-white shadow-md rounded-xl dark:bg-gray-800">
<!-- Grid -->
<div class="flex justify-between">
<div>
<svg class="w-10 h-10" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 26V13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25H12" class="stroke-blue-600 dark:stroke-white" stroke="currentColor" stroke-width="2"/>
<path d="M5 26V13.16C5 8.65336 8.58172 5 13 5C17.4183 5 21 8.65336 21 13.16C21 17.6666 17.4183 21.32 13 21.32H12" class="stroke-blue-600 dark:stroke-white" stroke="currentColor" stroke-width="2"/>
<circle cx="13" cy="13.0214" r="5" fill="currentColor" class="fill-blue-600 dark:fill-white"/>
</svg>
<h1 class="mt-2 text-lg md:text-xl font-semibold text-blue-600 dark:text-white">Preline Inc.</h1>
</div>
<!-- Col -->
<div class="text-right">
<h2 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-200">Invoice #</h2>
<span class="mt-1 block text-gray-500">3682303</span>
<address class="mt-4 not-italic text-gray-800 dark:text-gray-200">
45 Roker Terrace<br>
Latheronwheel<br>
KW5 8NW, London<br>
United Kingdom<br>
</address>
</div>
<!-- Col -->
</div>
<!-- End Grid -->
<!-- Grid -->
<div class="mt-8 grid sm:grid-cols-2 gap-3">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bill to:</h3>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sara Williams</h3>
<address class="mt-2 not-italic text-gray-500">
280 Suzanne Throughway,<br>
Breannabury, OR 45801,<br>
United States<br>
</address>
</div>
<!-- Col -->
<div class="sm:text-right space-y-2">
<!-- Grid -->
<div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
<dl class="grid sm:grid-cols-5 gap-x-3">
<dt class="col-span-3 font-semibold text-gray-800 dark:text-gray-200">Invoice date:</dt>
<dd class="col-span-2 text-gray-500">03/10/2018</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3">
<dt class="col-span-3 font-semibold text-gray-800 dark:text-gray-200">Due date:</dt>
<dd class="col-span-2 text-gray-500">03/11/2018</dd>
</dl>
</div>
<!-- End Grid -->
</div>
<!-- Col -->
</div>
<!-- End Grid -->
<!-- Table -->
<div class="mt-6">
<div class="border border-gray-200 p-4 rounded-lg space-y-4 dark:border-gray-700">
<div class="hidden sm:grid sm:grid-cols-5">
<div class="sm:col-span-2 text-xs font-medium text-gray-500 uppercase">Item</div>
<div class="text-left text-xs font-medium text-gray-500 uppercase">Qty</div>
<div class="text-left text-xs font-medium text-gray-500 uppercase">Rate</div>
<div class="text-right text-xs font-medium text-gray-500 uppercase">Amount</div>
</div>
<div class="hidden sm:block border-b border-gray-200 dark:border-gray-700"></div>
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
<div class="col-span-full sm:col-span-2">
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Item</h5>
<p class="font-medium text-gray-800 dark:text-gray-200">Design UX and UI</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Qty</h5>
<p class="text-gray-800 dark:text-gray-200">1</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Rate</h5>
<p class="text-gray-800 dark:text-gray-200">5</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Amount</h5>
<p class="sm:text-right text-gray-800 dark:text-gray-200">$500</p>
</div>
</div>
<div class="sm:hidden border-b border-gray-200 dark:border-gray-700"></div>
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
<div class="col-span-full sm:col-span-2">
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Item</h5>
<p class="font-medium text-gray-800 dark:text-gray-200">Web project</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Qty</h5>
<p class="text-gray-800 dark:text-gray-200">1</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Rate</h5>
<p class="text-gray-800 dark:text-gray-200">24</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Amount</h5>
<p class="sm:text-right text-gray-800 dark:text-gray-200">$1250</p>
</div>
</div>
<div class="sm:hidden border-b border-gray-200 dark:border-gray-700"></div>
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
<div class="col-span-full sm:col-span-2">
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Item</h5>
<p class="font-medium text-gray-800 dark:text-gray-200">SEO</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Qty</h5>
<p class="text-gray-800 dark:text-gray-200">1</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Rate</h5>
<p class="text-gray-800 dark:text-gray-200">6</p>
</div>
<div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase">Amount</h5>
<p class="sm:text-right text-gray-800 dark:text-gray-200">$2000</p>
</div>
</div>
</div>
</div>
<!-- End Table -->
<!-- Flex -->
<div class="mt-8 flex sm:justify-end">
<div class="w-full max-w-2xl sm:text-right space-y-2">
<!-- Grid -->
<div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
<dl class="grid sm:grid-cols-5 gap-x-3">
<dt class="col-span-3 font-semibold text-gray-800 dark:text-gray-200">Subtotal:</dt>
<dd class="col-span-2 text-gray-500">$2750.00</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3">
<dt class="col-span-3 font-semibold text-gray-800 dark:text-gray-200">Total:</dt>
<dd class="col-span-2 text-gray-500">$2750.00</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3">
<dt class="col-span-3 font-semibold text-gray-800 dark:text-gray-200">Tax:</dt>
<dd class="col-span-2 text-gray-500">$39.00</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3">
<dt class="col-span-3 font-semibold text-gray-800 dark:text-gray-200">Amount paid:</dt>
<dd class="col-span-2 text-gray-500">$2789.00</dd>
</dl>
<dl class="grid sm:grid-cols-5 gap-x-3">
<dt class="col-span-3 font-semibold text-gray-800 dark:text-gray-200">Due balance:</dt>
<dd class="col-span-2 text-gray-500">$0.00</dd>
</dl>
</div>
<!-- End Grid -->
</div>
</div>
<!-- End Flex -->
<div class="mt-8 sm:mt-12">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Thank you!</h4>
<p class="text-gray-500">If you have any questions concerning this invoice, use the following contact information:</p>
<div class="mt-2">
<p class="block text-sm font-medium text-gray-800 dark:text-gray-200">example@site.com</p>
<p class="block text-sm font-medium text-gray-800 dark:text-gray-200">+1 (062) 109-9222</p>
</div>
</div>
<p class="mt-5 text-sm text-gray-500">© 2022 Preline.</p>
</div>
<!-- End Card -->
<!-- Buttons -->
<div class="mt-6 flex justify-end gap-x-3">
<a class="inline-flex justify-center items-center gap-x-3 text-sm text-center border hover:border-gray-300 shadow-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 dark:border-gray-800 dark:hover:border-gray-600 dark:shadow-slate-700/[.7] dark:text-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z"/>
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
</svg>
PDF
</a>
<a class="inline-flex justify-center items-center gap-x-3 text-center bg-blue-600 hover:bg-blue-700 border border-transparent text-sm text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 dark:focus:ring-offset-gray-800" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
<path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/>
</svg>
Print details
</a>
</div>
<!-- End Buttons -->
</div>
</div>
<!-- End Invoice -->
</body>
Download Preline UI
Our code is available for you to download, inspect, and modify: