tab3

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

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

<p class="text-sm text-gray-500">
      Manage patient appointments, status and consultations
    </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">
          Clinic
        </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 Clinics</option>
          <option>MedCare Clinic</option>
          <option>HealthCare Plus</option>
        </select>
      </div>

<div>
        <label class="mb-1 block text-sm font-medium text-gray-700">
          Doctor
        </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 Doctors</option>
          <option>Dr. Rahul Sharma</option>
          <option>Dr. Priya Verma</option>
        </select>
      </div>

</div>

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

<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>Scheduled</option>
          <option>Checked-In</option>
          <option>Completed</option>
          <option>No-Show</option>
          <option>Cancelled</option>
        </select>
      </div>

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

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

</div>

<div class="mt-4 flex justify-end gap-2">

<button
        class="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
      >
        Reset
      </button>

<button
        class="rounded-md bg-gray-800 px-4 py-2 text-sm text-white hover:bg-gray-900"
      >
        Apply Filters
      </button>

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

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

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

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

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

<div class="font-medium text-gray-800">
                Rahul Kumar
              </div>

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

</td>

<div class="font-medium text-gray-800">
                Dr. Rahul Sharma
              </div>

<div class="text-xs text-gray-500">
                General Physician
              </div>

</td>

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

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

</td>

<td class="px-4 py-4">

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

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

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

</div>

</td>

</tr>

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

<div class="font-medium text-gray-800">
                Priya Singh
              </div>

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

</td>

<div class="font-medium text-gray-800">
                Dr. Priya Verma
              </div>

<div class="text-xs text-gray-500">
                Dermatology
              </div>

</td>

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

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

</td>

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

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

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

</div>

</td>

</tr>

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

<div class="font-medium text-gray-800">
                Amit Sharma
              </div>

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

</td>

<div class="font-medium text-gray-800">
                Dr. Rahul Sharma
              </div>

<div class="text-xs text-gray-500">
                General Physician
              </div>

</td>

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

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

</td>

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

</div>

</td>

</tr>

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

<div class="font-medium text-gray-800">
                Neha Gupta
              </div>

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

</td>

<div class="font-medium text-gray-800">
                Dr. Priya Verma
              </div>

<div class="text-xs text-gray-500">
                Dermatology
              </div>

</td>

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

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

</td>

</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 45 appointments
      </p>

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

</div>

Related Examples

Dionysus AI Chat

Maxim

11 months ago

1.2k
Neon container

Anonymous

2 years ago

4.4k
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Cockatoo

Lokesh H

1 month ago

71
Play, Pause and Stop buttons

Lukas Müller

3 years ago

12.1k
Updated customer details page
Customer details page

Olivia Smith

2 years ago

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

5 months ago

360
Flex and Flex-Col
วิธีการใช้ Flex และ Flex-Col

rawitsara.tr

1 year ago

1.2k
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
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

474
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Nick Girga

1 year ago

1.8k