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

726

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

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

6 months ago

733
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

1 year ago

1.5k
Login page

Author:
Reuben Enahoro

1 year ago

2.1k
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

761
Half filled circle with tailwind

Author:
Alok

3 years ago

13.6k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

8 months ago

1.6k
htmlcss0

Author:
Anonymous

7 months ago

543
Simple count down timer

Author:
Gopi Yadav

3 years ago

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

Author:
rawitsara.tr

5 months ago

464
Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

9 months ago

946
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

9 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components