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

907

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

Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

11 months ago

669
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

9 months ago

631
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

9 months ago

1.1k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

1 year ago

2.8k
Chat Bot

Author:
Md. Tofayel islam

7 months ago

800
Share button

Author:
Maxim

1 year ago

1.5k
Hero

Author:
ORGIN_DREAMS

9 months ago

1.4k
Heading

Author:
KULDEEP

8 months ago

1k
Heading Style

Author:
KULDEEP

9 months ago

509
Background image section

Author:
Marc

2 years ago

6.7k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

602
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components