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

samtaler status

rene kristoffersen

2 years ago

1.6k
Admin portal landing page

Srreyashi DeyChakii

2 years ago

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

Alif Bima Pradana

7 months ago

728
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

2.1k
crud
big crud

Hacker Development

1 year ago

1.4k
Advanced table

Noob

3 years ago

24k
Table template

Oliver Hansen

3 years ago

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

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

33
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

2.9k
Table
tables

Aman kumar

2 years ago

5.9k
Tailwind CSS Responsive Table

Prashant

4 years ago

12.6k