Home
SHARIFUL ISLAM
Modern Responsive Product Table Design with TailwindCSS

Modern Responsive Product Table Design with TailwindCSS

This is a clean and responsive product listing table built with HTML and TailwindCSS. The table displays product images, names, unit prices, quantities, and total costs in a structured format. It adapts to different screen sizes by enabling horizontal scrolling on smaller devices. The design is minimal yet functional, making it ideal for e-commerce websites, order summaries, and invoice pages.

Let me know if you need any refinements!

This tailwind example is contributed by SHARIFUL ISLAM, on 15-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Table

Author SHARIFUL ISLAM

771

Fork Fullscreen

<div class="flex items-center justify-center h-screen">
   <div class="overflow-x-auto">
        <table class="w-full bg-white shadow-md rounded-lg border border-gray-200">
            <thead>
                <tr class="border-b">
                    <th class="px-6 py-4 text-left text-gray-600 font-medium">Product Name</th>
                    <th class="px-6 py-4 text-left text-gray-600 font-medium">Unit Price</th>
                    <th class="px-6 py-4 text-left text-gray-600 font-medium">Qty</th>
                    <th class="px-6 py-4 text-left text-gray-600 font-medium">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b">
                    <td class="px-6 py-4 flex items-center gap-4">
                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHx8MA%3D%3D" alt="Product" class="w-12 h-12 rounded-md">
                        <div>
                            <p class="text-gray-800 font-medium">Apple Watch Series 8 GPS 45mm</p>
                            <span class="text-green-500 text-sm">UBL</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">$550</td>
                    <td class="px-6 py-4">x3</td>
                    <td class="px-6 py-4 font-semibold text-gray-900">$1,500</td>
                </tr>
                <tr class="border-b">
                    <td class="px-6 py-4 flex items-center gap-4">
                        <img src="https://plus.unsplash.com/premium_photo-1681711647066-ef84575c0d95?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZHVjdCUyMHBob3RvZ3JhcGh5fGVufDB8fDB8fHww" alt="Product" class="w-12 h-12 rounded-md">
                        <div>
                            <p class="text-gray-800 font-medium">Apple Watch Series 8 GPS 45mm</p>
                            <span class="text-green-500 text-sm">UBL</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">$550</td>
                    <td class="px-6 py-4">x3</td>
                    <td class="px-6 py-4 font-semibold text-gray-900">$1,500</td>
                </tr>
                <tr>
                    <td class="px-6 py-4 flex items-center gap-4">
                        <img src="https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTExL3JtMzYyLTAxYS1tb2NrdXAuanBn.jpg" alt="Product" class="w-12 h-12 rounded-md">
                        <div>
                            <p class="text-gray-800 font-medium">Apple Watch Series 8 GPS 45mm</p>
                            <span class="text-green-500 text-sm">UBL</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">$550</td>
                    <td class="px-6 py-4">x3</td>
                    <td class="px-6 py-4 font-semibold text-gray-900">$1,500</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Related Examples

crud
big crud

Author:
Hacker Development

1 month ago

216
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

3 months ago

814
Table template

Author:
Oliver Hansen

2 years ago

14.7k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

1 month ago

172
Table

Author:
Anonymous

1 year ago

6k
User Profile
This is some information about the user.

Author:
gidy

3 weeks ago

27
Stripped table with tailwind css

Author:
Task Master

2 years ago

14.5k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

1 month ago

313
Table template

Author:
Lukas Müller

2 years ago

15.1k
Pricing Table

Author:
Akshay

2 years ago

10.3k
Tailwind CSS Datatable
Use this datatable component from Flowbite to power interactivity for table like pagination, search, sorting, and more: https://flowbite.com/docs/plugins/datatables/

Author:
Zoltán Szőgyényi

10 months ago

1.9k
Table
tables

Author:
Aman kumar

11 months ago

3.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components