tab4

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 17

Fork Fullscreen

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

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

<p class="text-sm text-gray-500">
      Find a clinic and book an appointment with a 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">
          Search
        </label>

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

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

<div>
        <label class="mb-1 block text-sm font-medium text-gray-700">
          Emergency Services
        </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 value="true">Available</option>
          <option value="false">Not Available</option>
        </select>
      </div>

<div>
        <label class="mb-1 block text-sm font-medium text-gray-700">
          Specialization Available
        </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>

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

<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">
                Clinic Name
                <span>↕</span>
              </button>
            </th>

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

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

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

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

<th class="px-4 py-3">
              <button
                class="flex items-center gap-1 font-semibold hover:text-blue-600">
                Doctors
                <span>↕</span>
              </button>
            </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">
              City Care Clinic
            </td>

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

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

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

</tr>

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

<td class="px-4 py-3 font-medium text-gray-800">
              Apollo Medical Center
            </td>

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

</tr>

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

<td class="px-4 py-3 font-medium text-gray-800">
              Health Plus Clinic
            </td>

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

<td class="px-4 py-3">
              <span class="rounded-full bg-green-100 px-2 py-1 text-xs text-green-700">
                Emergency
              </span>
            </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 25 clinics
      </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

Calculator
This calculator uses CSS although it can be passed directly to tailwind

Ameth Galarcio

2 years ago

2.6k
machine
tell you how your MAC pc work

gidy

10 months ago

750
Todo List with Dark theme
Todo List with Dark theme

Muzammil Riaz

1 year ago

1.9k
Simple layout

Edward Carandang

2 years ago

3.8k
chat bar
live chat

gidy

1 year ago

2.2k
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Nishimwe Jeanine

1 year ago

1.2k
tables

John

23 hours ago

7
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Cloudscape 404 Error Page
A unique responsive 404 page built with pure HTML and Tailwind CSS .

JUGENDRA GANGWAR

2 weeks ago

23
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Nicole Shalom

1 year ago

1.9k
Empty Wishlist UI

JUGENDRA GANGWAR

2 days ago

8
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Ramkesh Gupta

1 year ago

754