Invoice

simpel invoice digital

This tailwind example is contributed by Rushikesh Latpate, on 02-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Rushikesh Latpate

911

Fork Fullscreen

<!DOCTYPE html>
<html>
<head>

<nav class="flow-root p-4 bg-gray-100 ">
        <div class="float-left">
            <a href="#" class="text-pink-900 dark:text-blue-400 hover:underline"><b> <i class="bi bi-arrow-left"></i></b> </a>
        </div>
        <div class="float-right flex items-center gap-4">
            <a href="print.php" class="float- text-pink-900 hover:underline"><i class="bi bi-cloud-download"></i></a>
            <a href="print.php" class="float- text-pink-900 hover:underline"><i class="bi bi-printer"></i></a>
        </div>
    </nav>

<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pb-4 gap-4">
                <div>
                    <img src="https://web.sugam24.in/img/sugam24servicesLogo.png" alt="Company Logo" class="h-10 sm:h-12">
                </div>
                <div class="text-left sm:text-right">
                    <h1 class="text-xl sm:text-2xl font-bold text-gray-800">Invoice</h1>
                    <p class="text-xs sm:text-sm text-gray-600">Invoice #: INV-2025-001</p>
                    <p class="text-xs sm:text-sm text-gray-600">Date: April 21, 2025</p>
                </div>
            </div>

<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pb-4 gap-4">
                <div>
                    <p class="text-xs sm:text-sm text-gray-600">Issue For:</p>
                    <h2 class="text-lg sm:text-xl font-bold mt-2">Exim electronics llp </h2>
                    <p class="text-xs sm:text-sm text-gray-600">shop 63, borvali east, </p>
                    <p class="text-xs sm:text-sm text-gray-600">mumbai, MH IN 441523</p>
                    <p class="text-xs sm:text-sm text-gray-600">Email: info@abccorp.com</p>
                    <p class="text-xs sm:text-sm text-gray-600">Phone: +91 9420133185</p>
                </div>
                <div class="text-left sm:text-right">
                    <p class="text-xs sm:text-sm text-gray-600">Issued By:</p>
                    <h1 class="text-xl sm:text-2xl font-bold text-gray-800">Sugam24 Services </h1>
                    <p class="text-xs sm:text-sm text-gray-600">Near Aradhana complex, Ram Nagar, Popatkheda road</p>
                    <p class="text-xs sm:text-sm text-gray-600">Akot, Dist. Akola, Maharashtra IN 444101</p>
                    <p class="text-xs sm:text-sm text-gray-600">Email: accounts@sugam24.in, support@sugam24.in</p>
                    <p class="text-xs sm:text-sm text-gray-600">Landline: +91 07258 *****, +91 9420133185</p>
                    <p class="text-xs sm:text-sm text-gray-600">GSTIN: *******, PAN: BEIPL7924M</p>
                </div>
            </div>

<style>
     .table_boarder {
          border-width: 1px; 
          border-color: #111827;

th {
          border-width: 1px; 
          border-color: #111827; 
          }

td {
          border-width: 1px; 
          border-color: #111827; 
          }

}
    </style>

<div class="container mx-auto p-1">
        <div class="overflow-x-auto shadow">
            <table class="table_boarder w-full text-sm text-left text-gray-500 ">
                
                <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                    <tr>
                        <th rowspan="2" scope="col" class="px-2 py-1">#</th>
                        <th rowspan="2" scope="col" class="px-2 py-1" style="min-width: 200px;">Item & Description </th>
                        <th rowspan="2" scope="col" class="px-2 py-1">HSN/SAC</th>
                        <th rowspan="2" scope="col" class="px-2 py-1">Qty</th>
                        <th rowspan="2" scope="col" class="px-2 py-1">Rate</th>
                        <th colspan="2" scope="col" class="px-2 py-1"><center>GST</center></th>
                        <th rowspan="2" scope="col" class="px-2 py-1">Amount</th>
                    </tr>
                    <tr>
                        <th scope="col" class="px-6 py-3">%</th>
                        <th scope="col" class="px-6 py-3">Amt</th>
                    </tr>
                </thead>

<tbody>
                    <tr class="bg-white border-b  hover:bg-gray-100">
                        <td class="px-2 py-2">1</td>
                        <td class="px-2 py-2 text-xs sm:text-sm text-gray-600">Cloud Server (cloudserver-2BGLtmGn.
                          mhc) 4096 MB RAM, 2 CPU, 80 GB SSD Space, 1000 GB Bandwidth FROM 2025-05-25 12:56:41 TO 2025-05-25 14:05:28 (Total Hours: 1) SAC:998315
                        </td>
                        <td class="px-2 py-1">998315</td>
                        <td class="px-2 py-1 text-green-500">20</td>
                        <td class="px-2 py-1 text-green-500">2.22</td>

</div>
    </div>

<div class="mt-4 text-right" style="padding-right: 20px;">
                    <p class="text-xs sm:text-sm text-gray-600">
                        Sub-Total: <span>Rs. 5022.00</span>
                    </p>
                    <p class="text-xs sm:text-sm font-semibold text-gray-800">
                        Total Amount: <span>&#8377; 5022.00 INR</span>
                    </p>
                    <p class="text-xs sm:text-sm text-gray-600">
                        Payment Made (Prepaid Wallet): <span>(-) 5022/-</span>
                    </p>
                    <p class="text-xs sm:text-sm text-gray-600">
                        Balance Due: <span>&#8377; 00.00 INR</span>
                    </p>
                </div>

<div class="mt-10 border-t pt-4 text-center text-xs sm:text-sm text-gray-600">
                <p>Terms: As per agreement</p>
                <p>www.sugam24.in | support@sugam24.in</p>
            </div>

</div>
        </div><br>
<br>
<br>

</div>

</body>
</html>

Related Examples

Glassmorphism form

Author:
Sophia Baker

2 years ago

18.7k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

8 months ago

1.1k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.4k
Flex and Flex-Col
วิธีการใช้ Flex และ Flex-Col

Author:
rawitsara.tr

7 months ago

649
Team Members

Author:
Abdul Baset Bappy

9 months ago

1k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Author:
Alif Bima Pradana

1 month ago

513
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

1 year ago

1.9k
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

9 months ago

1.3k
Sign up
sign up page

Author:
gidy

10 months ago

1.4k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

10 months ago

980
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

9 months ago

945
Invoice Generator
Invoice Generator

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

153

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components