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 166

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

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

Ameth Galarcio

1 year ago

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

Hacker Development

1 year ago

1.6k
light mode table
"pretty" table

Hugo Del-Negro

11 months ago

904
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5k
Table template

Lukas Müller

3 years ago

17k
Table
tables

Aman kumar

2 years ago

5.4k
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

2.9k
samtaler status

rene kristoffersen

2 years ago

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

3 weeks ago

31
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.

Hamza Atig

1 year ago

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

Christian Ahlin

1 year ago

2.9k
Simple table with border

Kairi Greene

3 years ago

13.3k