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

334

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://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

Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

6 months ago

1.1k
Snake Game tailwind
snake game

Author:
QQ-VVN

3 months ago

325
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

2 months ago

35
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

Author:
INGRIDE MUZIRANENGE

2 months ago

292
walletp2p

Author:
Anonymous

7 months ago

927
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

11k
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

2 months ago

495
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

3 months ago

493
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Author:
Ahita Bisma Adlula

5 months ago

366
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

525
Share button

Author:
Maxim

7 months ago

1.1k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

6 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components