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

1.8k

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

Table template

Author:
Oliver Hansen

3 years ago

16.2k
Table
tables

Author:
Aman kumar

1 year ago

4.7k
Advanced table

Author:
Noob

3 years ago

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

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

11 months ago

1.7k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

1 year ago

2.3k
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

11 months ago

3.6k
Table
tables

Author:
Aman kumar

1 year ago

5.3k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Christian Ahlin

1 year ago

2.4k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

11 months ago

2.6k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

2 years ago

14.4k
Datatable
Datatable example with datatable.js with search, sort, pagination

Author:
R.P Ketan

3 years ago

25.1k
light mode table
"pretty" table

Author:
Hugo Del-Negro

4 months ago

470

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components