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 269

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

Nutrition facts table
Show Nutrient contents with a stripped table

Kofi Osei

3 years ago

14.1k
Stripped table with tailwind css

Task Master

3 years ago

17k
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

9 months ago

844
User Profile
This is some information about the user.

gidy

1 year ago

1.3k
Admin portal landing page

Srreyashi DeyChakii

2 years ago

4.6k
Table template

Oliver Hansen

3 years ago

17.3k
Respensive Table
Respensive table for all devices.

Arshid Iqbal

4 months ago

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

Ameth Galarcio

1 year ago

3k
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
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Anum Shahana

2 years ago

4.1k
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.

Hamza Atig

1 year ago

2.1k
Order Management Data Table
A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

Alla Telegina

2 months ago

65