tab5

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 5

Fork Fullscreen

```html
<div class="p-6">

<div class="mb-5">
    <h2 class="text-2xl font-semibold text-gray-800">
      Browse Doctors
    </h2>

<p class="text-sm text-gray-500">
      Select a clinic and find an available doctor
    </p>
  </div>

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

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

<select
          class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:border-blue-500"
        >
          <option value="">Select Clinic</option>
          <option>City Care Clinic</option>
          <option>Apollo Medical Center</option>
          <option>Health Plus Clinic</option>
        </select>
      </div>

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

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

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

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

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

</div>

<div class="mt-4 flex gap-2">

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

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

</div>

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

<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">
                Specialization
                <span>↕</span>
              </button>
            </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">
                Consultation Fee
                <span>↕</span>
              </button>
            </th>

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

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

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

</tr>

</thead>

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

<td class="px-4 py-3 font-medium text-gray-800">
              Dr. Rahul Sharma
            </td>

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

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

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

<button
                class="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700">
                Book Appointment
              </button>

</td>

</tr>

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

<td class="px-4 py-3 font-medium text-gray-800">
              Dr. Neha Kapoor
            </td>

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

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

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

<button
                class="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700">
                Book Appointment
              </button>

</td>

</tr>

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

<td class="px-4 py-3 font-medium text-gray-800">
              Dr. Amit Verma
            </td>

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

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

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

<button
                disabled
                class="cursor-not-allowed rounded-md bg-gray-300 px-3 py-1.5 text-xs font-medium text-gray-600">
                Unavailable
              </button>

</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 to 3 of 18 doctors
      </p>

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

</div>

</div>
```

Related Examples

Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

1 month ago

66
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Rathanak Phan

1 year ago

1k
GMT Live Coding

Seth

7 months ago

374
Maintenance page template
The site is under maintenance placeholder page

Anonymous

2 years ago

12.1k
Glassmorphism form

Sophia Baker

3 years ago

19.3k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

460
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k
Simple layout

Edward Carandang

2 years ago

3.7k
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

INGRIDE MUZIRANENGE

1 year ago

1.2k
carte visa black

Omer fils ELENGA

4 months ago

269
Heading

KULDEEP

1 year ago

1.6k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Nick Girga

1 year ago

2k