table

This tailwind example is contributed by aditya_sharma, on 01-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Table

Author aditya_sharma

Tailwind v3.4 174

Fork Fullscreen

<div
  class="w-full overflow-x-auto rounded-2xl border border-slate-200 bg-white shadow-sm"
>
  <table class="w-full min-w-max">
    
    <tbody class="divide-y divide-slate-100">
     
      <tr class="group transition-colors duration-150 hover:bg-blue-50/40">
        <td class="px-5 py-4 text-sm font-medium text-slate-900">
          Rahul Sharma
        </td>
        <td class="px-5 py-4 text-sm text-slate-700">rahul@example.com</td>
        <td class="px-5 py-4 text-sm text-slate-700">Admin</td>
        <td class="px-5 py-4 text-sm">
          <span
            class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700"
          >
            Active
          </span>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <button
              class="px-3 py-2 rounded-lg text-sm font-medium bg-blue-50 text-blue-700 hover:bg-blue-100"
            >
              Edit
            </button>

<button
              class="px-3 py-2 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100"
            >
              Delete
            </button>
          </div>
        </td>
      </tr>

<tr class="group transition-colors duration-150 hover:bg-blue-50/40">
        <td class="px-5 py-4 text-sm font-medium text-slate-900">
          Priya Singh
        </td>
        <td class="px-5 py-4 text-sm text-slate-700">priya@example.com</td>
        <td class="px-5 py-4 text-sm text-slate-700">Manager</td>
        <td class="px-5 py-4 text-sm">
          <span
            class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700"
          >
            Active
          </span>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <button
              class="px-3 py-2 rounded-lg text-sm font-medium bg-blue-50 text-blue-700 hover:bg-blue-100"
            >
              Edit
            </button>

<tr class="group transition-colors duration-150 hover:bg-blue-50/40">
        <td class="px-5 py-4 text-sm font-medium text-slate-900">Amit Kumar</td>
        <td class="px-5 py-4 text-sm text-slate-700">amit@example.com</td>
        <td class="px-5 py-4 text-sm text-slate-700">Employee</td>
        <td class="px-5 py-4 text-sm">
          <span
            class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700"
          >
            Inactive
          </span>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <button
              class="px-3 py-2 rounded-lg text-sm font-medium bg-blue-50 text-blue-700 hover:bg-blue-100"
            >
              Edit
            </button>

<tr class="group transition-colors duration-150 hover:bg-blue-50/40">
        <td class="px-5 py-4 text-sm font-medium text-slate-900">Neha Verma</td>
        <td class="px-5 py-4 text-sm text-slate-700">neha@example.com</td>
        <td class="px-5 py-4 text-sm text-slate-700">Employee</td>
        <td class="px-5 py-4 text-sm">
          <span
            class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700"
          >
            Active
          </span>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <button
              class="px-3 py-2 rounded-lg text-sm font-medium bg-blue-50 text-blue-700 hover:bg-blue-100"
            >
              Edit
            </button>

<button
              class="px-3 py-2 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100"
            >
              Delete
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Related Examples

Simple responsive table

Lukas Müller

3 years ago

12.1k
Table

Anonymous

2 years ago

7.8k
Pricing Table

Akshay

4 years ago

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

Kofi Osei

3 years ago

14k
Table
tables

Aman kumar

2 years ago

5.5k
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!

SHARIFUL ISLAM

1 year ago

2.4k
Stripped table with tailwind css

Task Master

3 years ago

17k
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5.1k
Responsive Class List Table using Tailwind CSS
A responsive and customizable class list table built with Tailwind CSS, featuring actions for editing and deleting classes.

Anum Shahana

2 years ago

2.8k
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
User Profile
This is some information about the user.

gidy

1 year ago

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

Alla Telegina

1 year ago

2.1k