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 84

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

InGen

Dennis Kamp

7 months ago

439
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

ORGIN_DREAMS

1 year ago

1.8k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

3k
Ethical Fashion

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.6k
Lots of button examples
tailwind button examples

QQ-VVN

1 year ago

1.3k
Maintenance page

Faye

1 year ago

2.7k
default images playground
an images gallery

mingderwang

4 months ago

113
Apple Dock Navigation Bar

Cristian

1 year ago

3k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Kirsten F

1 year ago

1.5k
admin panel

Anonymous

2 years ago

3.5k
info form

Anonymous

3 weeks ago

91
tab6
table

Anonymous

3 weeks ago

97