tab1

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 15

Fork Fullscreen

<div class="mb-5 flex items-center justify-between">
    <div>
      <h2 class="text-2xl font-semibold text-gray-800">
        Clinic Management
      </h2>
      <p class="text-sm text-gray-500">
        Manage all clinics
      </p>
    </div>

<button
      class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
    >
      + Add Clinic
    </button>
  </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 border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
        >
          <option>All Cities</option>
          <option>Mohali</option>
          <option>Chandigarh</option>
          <option>Ludhiana</option>
        </select>
      </div>

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

<select
          class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
        >
          <option>All Status</option>
          <option>Active</option>
          <option>Inactive</option>
        </select>
      </div>

</div>

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

<thead class="bg-gray-50 text-xs uppercase text-gray-600">

<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"
              >
                Code
                <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">
              Contact
            </th>

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

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

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

<th class="px-4 py-3 text-center">
              Actions
            </th>

</tr>

</thead>

<tbody class="divide-y divide-gray-200">

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

<td class="px-4 py-4">
              <div class="font-medium text-gray-800">
                MedCare Clinic
              </div>

<div class="text-xs text-gray-500">
                123 Main Street
              </div>
            </td>

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

<div class="text-xs text-gray-500">
                medcare@example.com
              </div>
            </td>

</td>

<span class="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700">
                Active
              </span>

</td>

<button
                  class="rounded border border-red-300 px-3 py-1.5 text-xs text-red-600 hover:bg-red-50"
                >
                  Delete
                </button>

</div>

</td>

</tr>

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

<td class="px-4 py-4">
              <div class="font-medium text-gray-800">
                HealthCare Plus
              </div>

<div class="text-xs text-gray-500">
                Sector 62
              </div>
            </td>

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

<div class="text-xs text-gray-500">
                healthcare@example.com
              </div>
            </td>

</td>

<span class="rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700">
                Inactive
              </span>

</td>

<button
                  class="rounded border border-red-300 px-3 py-1.5 text-xs text-red-600 hover:bg-red-50"
                >
                  Delete
                </button>

</div>

</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–10 of 24 clinics
      </p>

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

</div>

Related Examples

3d card
the Best 3D card with tailwind css

irahoza daniel

1 year ago

1.5k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

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

Omer fils ELENGA

1 week ago

5
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Abdul Jabbar Al Nahid

1 year ago

1.3k
GMT Live Coding

Seth

7 months ago

422
why chose us
Designed with clarity and purpose, each section of our website is crafted to guide users effortlessly from engaging visuals to structured content that highlights our values and builds trust at every scroll. abnahid.com

Abdul Jabbar Al Nahid

11 months ago

867
Neon container

Anonymous

2 years ago

4.4k
Detail Article

Alief Malik

1 month ago

61
Tailwind invoice example

Elijah Davis

3 years ago

19.8k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Coastal UI

1 year ago

2.1k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Muhammad Umair Arshad

1 year ago

1.7k