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.5k

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

Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

11 months ago

3.5k
sidebar

Author:
Abhishek Kumar

1 month ago

239
Material 3 Drawer [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

4 months ago

451
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

11 months ago

2.9k
Notification
Dev Community Notification Clone

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

10 months ago

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

Author:
TailwindFlex

3 years ago

18.6k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

1 year ago

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

Author:
AKASH GANDHAR

1 year ago

8k
gallary
html , css

Author:
Hacker Development

5 months ago

633
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

5 months ago

989
Tailwind Sidebar Layout

Author:
Junior Gauze

11 months ago

1.6k
Sidebar with Tailwind CSs and alpinejs

Author:
Michael Andreuzza

1 year ago

3.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components