tab2

table

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

Other

Author Anonymous

Tailwind v3.4 158

Fork Fullscreen

<div class="mb-5 flex items-center justify-between">
    <div>
      <h2 class="text-2xl font-semibold text-gray-800">
        Doctor Management
      </h2>

<p class="text-sm text-gray-500">
        Manage doctors, specializations and availability
      </p>
    </div>

<button
      class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
    >
      + Add Doctor
    </button>
  </div>

<div class="mb-5 rounded-lg border bg-white p-4">

<div class="md:col-span-2">
        <label class="mb-1 block text-sm font-medium text-gray-700">
          Search
        </label>

<div>
        <label class="mb-1 block text-sm font-medium text-gray-700">
          Clinic
        </label>

<select
          class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
        >
          <option>All Clinics</option>
          <option>MedCare Clinic</option>
          <option>HealthCare Plus</option>
        </select>
      </div>

<div>
        <label class="mb-1 block text-sm font-medium text-gray-700">
          Specialization
        </label>

<select
          class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
        >
          <option>All Specializations</option>
          <option>General Physician</option>
          <option>Cardiology</option>
          <option>Dermatology</option>
          <option>Orthopedics</option>
          <option>Pediatrics</option>
        </select>
      </div>

</div>

<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">

<div>
        <label class="mb-1 block text-sm font-medium text-gray-700">
          Availability
        </label>

<select
          class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
        >
          <option>All</option>
          <option>Available</option>
          <option>Unavailable</option>
        </select>
      </div>

<div>
        <label class="mb-1 block text-sm font-medium text-gray-700">
          Status
        </label>

<select
          class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
        >
          <option>All Status</option>
          <option>Active</option>
          <option>Inactive</option>
        </select>
      </div>

<div class="flex items-end justify-end gap-2">

<button
          class="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
        >
          Reset
        </button>

<button
          class="rounded-md bg-gray-800 px-4 py-2 text-sm text-white hover:bg-gray-900"
        >
          Apply Filters
        </button>

</div>

<div class="overflow-hidden rounded-lg border bg-white">

<thead class="bg-gray-50 text-xs uppercase text-gray-600">

<tr>

<th class="px-4 py-3">
              <button
                class="flex items-center gap-1 font-semibold hover:text-blue-600"
              >
                Doctor Name
                <span>↕</span>
              </button>
            </th>

<th class="px-4 py-3">
              <button
                class="flex items-center gap-1 font-semibold hover:text-blue-600"
              >
                Code
                <span>↕</span>
              </button>
            </th>

<th class="px-4 py-3">
              Clinic
            </th>

<th class="px-4 py-3">
              <button
                class="flex items-center gap-1 font-semibold hover:text-blue-600"
              >
                Specialization
                <span>↕</span>
              </button>
            </th>

<th class="px-4 py-3">
              Contact
            </th>

<th class="px-4 py-3">
              <button
                class="flex items-center gap-1 font-semibold hover:text-blue-600"
              >
                Experience
                <span>↕</span>
              </button>
            </th>

<th class="px-4 py-3">
              <button
                class="flex items-center gap-1 font-semibold hover:text-blue-600"
              >
                Fee
                <span>↕</span>
              </button>
            </th>

<th class="px-4 py-3">
              Availability
            </th>

<th class="px-4 py-3">
              Status
            </th>

<th class="px-4 py-3 text-center">
              Actions
            </th>

</tr>

</thead>

<tbody class="divide-y divide-gray-200">

<tr class="hover:bg-gray-50">

<div class="font-medium text-gray-800">
                Dr. Rahul Sharma
              </div>

</td>

<td class="px-4 py-4 text-gray-600">
              MedCare Clinic
            </td>

<td class="px-4 py-4 text-gray-600">
              General Physician
            </td>

<div class="text-xs text-gray-500">
                rahul@example.com
              </div>

</td>

<td class="px-4 py-4 text-gray-600">
              8 Years
            </td>

<span
                class="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700"
              >
                Available
              </span>

</td>

<span
                class="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700"
              >
                Active
              </span>

</td>

<button
                  class="rounded border border-red-300 px-3 py-1.5 text-xs text-red-600 hover:bg-red-50"
                >
                  Delete
                </button>

</div>

</td>

</tr>

<tr class="hover:bg-gray-50">

<div class="font-medium text-gray-800">
                Dr. Priya Verma
              </div>

</td>

<td class="px-4 py-4 text-gray-600">
              HealthCare Plus
            </td>

<td class="px-4 py-4 text-gray-600">
              Dermatology
            </td>

<div class="text-xs text-gray-500">
                priya@example.com
              </div>

</td>

<td class="px-4 py-4 text-gray-600">
              5 Years
            </td>

<span
                class="rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600"
              >
                Unavailable
              </span>

</td>

<span
                class="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700"
              >
                Active
              </span>

</td>

<button
                  class="rounded border border-red-300 px-3 py-1.5 text-xs text-red-600 hover:bg-red-50"
                >
                  Delete
                </button>

</div>

</td>

</tr>

</tbody>

</table>

</div>

<div class="flex items-center justify-between border-t px-4 py-3">

<p class="text-sm text-gray-500">
        Showing 1–10 of 20 doctors
      </p>

<button
          class="rounded border px-3 py-1.5 text-sm text-gray-500 hover:bg-gray-50"
        >
          Previous
        </button>

</div>

Related Examples

LED Dot Matrix Display
LED Dot Matrix Display

Omer fils ELENGA

1 month ago

210
Sign Up Form
A premium responsive sign up page built with pure HTML and Tailwind CSS featuring a split layout, gradient background, social authentication buttons, password strength indicator, trust section, and polished SaaS-style design.

JUGENDRA GANGWAR

1 month ago

96
Login page

Reuben Enahoro

1 year ago

2.9k
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

wavy kits

1 year ago

1.6k
record

Anonymous

1 month ago

22
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

SANJAY SINGH GARIYA

1 year ago

2.3k
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

3 months ago

320
Fnf Rewrite

Anonymous

1 week ago

75
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Abid Ullah

2 years ago

2.4k
Modern Architecture Blog & News Grid UI Layout
A clean, minimal, and fully responsive Blog/News grid layout built with Tailwind CSS. Features a 2-column article grid with fixed title alignment, clean pagination, and a sticky sidebar with categories & CTA widget. Perfect for architectural firms, magazine portals, and CMS integrations.

Alief Malik

2 months ago

190
Active Beauty Main Page

Maxim

1 year ago

1.9k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.5k