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

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

Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

3 months ago

347
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

2 months ago

229
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

3 months ago

446
Login AND Signup
login and signup

Author:
Uwera Dorcas

1 month ago

179
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

2 months ago

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

Author:
Abhiraj

5 months ago

872
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

1.3k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Author:
Kirsten F

2 weeks ago

119
Collapsible content

Author:
Rafferty Kim

2 years ago

13.2k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

1 month ago

47
pages / slides

Author:
MD Fardous Alom

5 months ago

740
Privacy Policy Page Template

Author:
Anonymous

6 months ago

867

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components