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

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

10 months ago

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

Author:
gidy

9 months ago

1k
Employee table
Modern Unique and responsive table layout

Author:
Anonymous

5 months ago

534
Table template

Author:
Oliver Hansen

3 years ago

16.4k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

10 months ago

759
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

1 year ago

2.3k
Simple table with border

Author:
Kairi Greene

3 years ago

12.7k
Tailwind CSS Responsive Table

Author:
Prashant

3 years ago

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

Author:
Christian Ahlin

1 year ago

2.5k
Table
tables

Author:
Aman kumar

1 year ago

5.3k
CRUD
design table #####by html,css,js

Author:
Hacker Development

10 months ago

836
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

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components