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

HTMLCODE
123

Anonymous

1 year ago

1k
Sign up
sign up page

gidy

1 year ago

2.1k
Invoice
Invoice

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.4k
Notification Center with Filter Tabs
Notification center UI featuring unread indicators, activity filters, user avatars and interactive mark-as-read functionality.

JUGENDRA GANGWAR

4 days ago

10
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

487
Pricing Plans

ariaw

1 year ago

634
The Life of a Singularity
The Life of a Singularity is the story of one powerful idea evolving into endless possibilities. It symbolizes innovation, intelligence, and the continuous pursuit of creating smarter, faster, and more connected experiences.

Lokesh H

4 months ago

112
responsive home page
the best home page

irahoza daniel

1 year ago

1.9k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Abdul Baset Bappy

1 year ago

1.9k
Features Component

KULDEEP

1 year ago

1.5k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Indra

1 year ago

1.3k
Hero

ORGIN_DREAMS

1 year ago

2.2k