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 129

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

Energy Efficiency Program - Oklahoma
Code for new IT proposal

Mario Williams

1 year ago

851
Career Page
This is a career page component built in tailwind

Deepak Sharma

1 year ago

1.7k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

9 months ago

992
walletp2p

Anonymous

1 year ago

2.2k
Image Gallery with Alpine.Js

Maxim

1 year ago

1.7k
Resizable container
Resizable container

Ganesh Salunke

10 months ago

516
Chat Interface Skeleton
Messaging interface skeleton built with Tailwind CSS.

JUGENDRA GANGWAR

4 weeks ago

16
Login Form
Login Card Structure This code gives you a complete, self-contained login card. Here's what's included: Input Fields: Email and password fields with icons, labels, and placeholder text. The password field includes a "Forgot password?" link. Options & Actions: A "Remember me" checkbox and a prominent "Sign In" button with hover effects. Footer Links: A "Create one" link for new accounts and social login icons (Google and GitHub) for alternative sign-in methods.

Muzammil Riaz

3 months ago

189
Recipe Card
beautiful recipe component with image and step-by-step instructions

Anonymous

3 years ago

8.1k
Free Tailwind components,
Free Tailwind components,

Omer fils ELENGA

1 month ago

52
random design

QQ-VVN

1 year ago

1.2k
loginForm2
form

Anonymous

1 month ago

261