Table template

This tailwind example is contributed by Oliver Hansen, on 06-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Table

Author Oliver Hansen

Tailwind v3.4 17.3k 12

Fork Fullscreen

<div class="shadow-lg rounded-lg overflow-hidden mx-4 md:mx-10">
    <table class="w-full table-fixed">
        <thead>
            <tr class="bg-gray-100">
                <th class="w-1/4 py-4 px-6 text-left text-gray-600 font-bold uppercase">Name</th>
                <th class="w-1/4 py-4 px-6 text-left text-gray-600 font-bold uppercase">Email</th>
                <th class="w-1/4 py-4 px-6 text-left text-gray-600 font-bold uppercase">Phone</th>
                <th class="w-1/4 py-4 px-6 text-left text-gray-600 font-bold uppercase">Status</th>
            </tr>
        </thead>
        <tbody class="bg-white">
            <tr>
                <td class="py-4 px-6 border-b border-gray-200">John Doe</td>
                <td class="py-4 px-6 border-b border-gray-200 truncate">johndoe@gmail.com</td>
                <td class="py-4 px-6 border-b border-gray-200">555-555-5555</td>
                <td class="py-4 px-6 border-b border-gray-200">
                    <span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span>
                </td>
            </tr>
            <tr>
                <td class="py-4 px-6 border-b border-gray-200">Jane Doe</td>
                <td class="py-4 px-6 border-b border-gray-200 truncate">janedoe@gmail.com</td>
                <td class="py-4 px-6 border-b border-gray-200">555-555-5555</td>
                <td class="py-4 px-6 border-b border-gray-200">
                    <span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span>
                </td>
            </tr>
            <tr>
                <td class="py-4 px-6 border-b border-gray-200">Jane Doe</td>
                <td class="py-4 px-6 border-b border-gray-200 truncate">janedoe@gmail.com</td>
                <td class="py-4 px-6 border-b border-gray-200">555-555-5555</td>
                <td class="py-4 px-6 border-b border-gray-200">
                    <span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span>
                </td>
            </tr>
            <tr>
                <td class="py-4 px-6 border-b border-gray-200">Jane Doe</td>
                <td class="py-4 px-6 border-b border-gray-200 truncate">janedoe@gmail.com</td>
                <td class="py-4 px-6 border-b border-gray-200">555-555-5555</td>
                <td class="py-4 px-6 border-b border-gray-200">
                    <span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span>
                </td>
            </tr>
            
        </tbody>
    </table>
</div>

Related Examples

Table for user management
It shows a table of users with their names, email, and role. The table also has two buttons for each row: one to save changes made to the user's details and another to delete the user.

I.P. Leroy

3 years ago

20.1k
Advanced table

Noob

3 years ago

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

R.P Ketan

3 years ago

26.1k
Table template

Lukas Müller

3 years ago

17k
Tailwind CSS Responsive Table

Prashant

4 years ago

12.8k
Stripped table with tailwind css

Task Master

3 years ago

17k
Table with progress column

Sophia Baker

4 years ago

13.4k
Table

Anonymous

2 years ago

7.8k
Nutrition facts table
Show Nutrient contents with a stripped table

Kofi Osei

3 years ago

14.1k
Simple table with border

Kairi Greene

3 years ago

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

Andreas Wagner

3 years ago

15.5k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

5 months ago

605