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 18

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

MULTI-STEP FORM component
MULTI-STEP FORM WIZARD · Open Source Component Steps: Personal → Role → Preferences → Goals → Review Features: stepper, validation, conditional fields, localStorage, animated transitions, review summary

Ijila Itunu

6 months ago

478
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
mailer
gmail style

МОЙДОЫР

11 months ago

779
LED Dot Matrix Display
LED Dot Matrix Display

Omer fils ELENGA

1 month ago

208
Hacker terminal #fake
hacker terminal tailwind css

QQ-VVN

1 year ago

2k
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

nejaa badr

2 years ago

4k
google clone page
This HTML page includes: The Google logo with the correct colors A search input field with microphone and camera icons "Google Search" and "Win Freeing Lucky" buttons The text "With new The ZGS Breakthrough Plus cabinets today's where business ?" Footer with all the links shown in the image: Advertising, Business, New Search works, Privacy, Terms, Settings The climate action text in the footer The layout is responsive and uses Tailwind CSS for styling. The colors match Google's brand colors, and the overall structure matches what's shown in the image.

Bishnu Thapa

1 year ago

1.6k
Order History
Order History

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Omer fils ELENGA

9 months ago

929
Heading Style

KULDEEP

1 year ago

767
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.9k
Dark dashboard
Dark dashboard

Tanvir Hasan Bappy (Tanvir)

10 months ago

409