Ticket

Sirve para ticket

This tailwind example is contributed by ANGEL EMILIANO MARQUEZ VAZQUEZ, on 08-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is drawer

Sidebar

Author ANGEL EMILIANO MARQUEZ VAZQUEZ

1.2k

Fork Fullscreen

<div class="bg-white border rounded-lg shadow-lg px-6 py-8 max-w-md mx-auto mt-8">
    <h1 class="font-bold text-2xl my-4 text-center text-purple-400">UPP COMERCE</h1>
    <hr class="mb-2">
    <div class="flex justify-between mb-6">
        <h1 class="text-lg font-bold">Invoice</h1>
        <div class="text-gray-700">
            <div>Date: 01/05/2023</div>
            <div>Invoice #: INV12345</div>
        </div>
    </div>
    <div class="mb-8">
        <h2 class="text-lg font-bold mb-4">Bill To:</h2>
        <div class="text-gray-700 mb-2">John Doe</div>
        <div class="text-gray-700 mb-2">123 Main St.</div>
        <div class="text-gray-700 mb-2">Anytown, USA 12345</div>
        <div class="text-gray-700">johndoe@example.com</div>
    </div>
    <table class="w-full mb-8">
        <thead>
            <tr>
                <th class="text-left font-bold text-gray-700">Description</th>
                <th class="text-right font-bold text-gray-700">Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-left text-gray-700">Product 1</td>
                <td class="text-right text-gray-700">$100.00</td>
            </tr>
            <tr>
                <td class="text-left text-gray-700">Product 2</td>
                <td class="text-right text-gray-700">$50.00</td>
            </tr>
            <tr>
                <td class="text-left text-gray-700">Product 3</td>
                <td class="text-right text-gray-700">$75.00</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td class="text-left font-bold text-gray-700">Total</td>
                <td class="text-right font-bold text-gray-700">$225.00</td>
            </tr>
        </tfoot>
    </table>
    <div class="text-gray-700 mb-2">Thank you for your business!</div>
    <div class="text-gray-700 text-sm">Please remit payment within 30 days.</div>
</div>

Related Examples

gallary
html , css

Author:
Hacker Development

1 month ago

180
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

58k
Dashboard sidebar

Author:
farid

8 months ago

3k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

17.7k
gallary
html , css

Author:
Hacker Development

1 month ago

120
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

1 month ago

358
Basic sidebar

Author:
Rajesh Maheshwari

4 months ago

793
side bar
html css

Author:
Hacker Development

1 month ago

173
Material 3 Drawer (Responsive) [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines. Static sidebar when the screen is >=lg. Collapses into a drawer when the screen is <lg.

Author:
Nick Girga

1 month ago

128
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

1 year ago

4k
Responsive Sidebar
Fully Responsive sidebar in both color modes light & dark with mini bar too.

Author:
AKASH GANDHAR

11 months ago

6.7k
Elegant Animated Drawer
Useful Tailwind classes for constructing an animated sidebar drawer that can be controlled via labels. The component itself is pure CSS and does not require JavaScript to use (although this example uses a bit of JS).

Author:
Nick Girga

1 month ago

266

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components