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

907

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

Simple responsive table

Author:
Lukas Müller

2 years ago

11k
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

3 months ago

293
CRUD
design table #####by html,css,js

Author:
Hacker Development

3 months ago

450
Table
tables

Author:
Aman kumar

1 year ago

3.9k
Admin portal landing page

Author:
Srreyashi DeyChakii

1 year ago

3.3k
Tailwind CSS Responsive Table

Author:
Prashant

3 years ago

11k
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

3 months ago

328
User Profile
This is some information about the user.

Author:
gidy

2 months ago

301
Teste

Author:
Barbara Santos

8 months ago

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

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

4 months ago

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

Author:
Andreas Wagner

1 year ago

13.3k
Table
tables

Author:
Aman kumar

1 year ago

4.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components