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 4

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

My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

786
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k
Solo leveling 2
Animation & movie field,videos,games.

ORGIN_DREAMS

1 year ago

1.1k
Clean Component Sharing Hub (Landing State)
A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

Hamza Atig

8 months ago

722
Organization Hierarchy list

Anonymous

3 years ago

9.8k
Plant Game
Checking to see if it works

Becky Keyworth

1 year ago

1.1k
Contact us Form with Responsive

KULDEEP

1 year ago

1.1k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.5k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

KULDEEP

1 year ago

1.4k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Abhiraj

1 year ago

3.8k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2k