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 85

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

Order History
Order History

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
Image Gallery with Alpine.Js

Maxim

1 year ago

1.7k
Chatbox template

Lucas Martinez

3 years ago

13.3k
Tailwind invoice example

Elijah Davis

3 years ago

19.8k
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
Serious Input Html
Input text serious like apple or smth

Cristian

2 years ago

2.8k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Payment Cards

Shammi Nethupul

2 years ago

3k
Terms of Service Page Template

Anonymous

1 year ago

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

489
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.2k
اصقل جسدك صفحة Landing

Hasan AlDoy (McDoy)

6 months ago

194