tab6

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 6

Fork Fullscreen

```html
<div class="p-6">

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

<p class="text-sm text-gray-500">
      View and manage your appointments
    </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">
          Status
        </label>

<select
          class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:border-blue-500"
        >
          <option value="">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">
          Appointment Date
        </label>

</div>

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

<button
        class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
        Search
      </button>

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

</div>

<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">

<div class="rounded-lg border bg-white p-5">

<div class="flex items-start justify-between border-b pb-4">

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

<p class="mt-1 text-sm text-gray-500">
            General Physician
          </p>
        </div>

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

</div>

<div class="grid grid-cols-2 gap-4 py-4">

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

<p class="mt-1 text-sm font-medium text-gray-800">
            City Care Clinic
          </p>
        </div>

<div>
          <p class="text-xs text-gray-500">
            Consultation Fee
          </p>

<div>
          <p class="text-xs text-gray-500">
            Appointment Date
          </p>

<div>
          <p class="text-xs text-gray-500">
            Appointment Time
          </p>

</div>

<div class="flex flex-wrap gap-2 border-t pt-4">

<button
          class="rounded-md bg-blue-600 px-3 py-2 text-xs font-medium text-white hover:bg-blue-700">
          Reschedule
        </button>

<button
          class="rounded-md bg-red-600 px-3 py-2 text-xs font-medium text-white hover:bg-red-700">
          Cancel
        </button>

<button
          disabled
          class="cursor-not-allowed rounded-md bg-gray-200 px-3 py-2 text-xs font-medium text-gray-500">
          View Prescription
        </button>

</div>

<div class="rounded-lg border bg-white p-5">

<div class="flex items-start justify-between border-b pb-4">

<div>
          <h3 class="text-lg font-semibold text-gray-800">
            Dr. Neha Kapoor
          </h3>

<p class="mt-1 text-sm text-gray-500">
            Cardiology
          </p>
        </div>

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

</div>

<div class="grid grid-cols-2 gap-4 py-4">

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

<p class="mt-1 text-sm font-medium text-gray-800">
            Apollo Medical Center
          </p>
        </div>

<div>
          <p class="text-xs text-gray-500">
            Consultation Fee
          </p>

<div>
          <p class="text-xs text-gray-500">
            Appointment Date
          </p>

<div>
          <p class="text-xs text-gray-500">
            Appointment Time
          </p>

</div>

<div class="flex flex-wrap gap-2 border-t pt-4">

<button
          disabled
          class="cursor-not-allowed rounded-md bg-gray-200 px-3 py-2 text-xs font-medium text-gray-500">
          Reschedule
        </button>

<button
          disabled
          class="cursor-not-allowed rounded-md bg-gray-200 px-3 py-2 text-xs font-medium text-gray-500">
          Cancel
        </button>

<button
          class="rounded-md bg-blue-600 px-3 py-2 text-xs font-medium text-white hover:bg-blue-700">
          View Prescription
        </button>

</div>

<div class="rounded-lg border bg-white p-5">

<div class="flex items-start justify-between border-b pb-4">

<div>
          <h3 class="text-lg font-semibold text-gray-800">
            Dr. Amit Verma
          </h3>

<p class="mt-1 text-sm text-gray-500">
            Orthopedics
          </p>
        </div>

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

</div>

<div class="grid grid-cols-2 gap-4 py-4">

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

<p class="mt-1 text-sm font-medium text-gray-800">
            Health Plus Clinic
          </p>
        </div>

<div>
          <p class="text-xs text-gray-500">
            Consultation Fee
          </p>

<div>
          <p class="text-xs text-gray-500">
            Appointment Date
          </p>

<div>
          <p class="text-xs text-gray-500">
            Appointment Time
          </p>

</div>

<div class="flex flex-wrap gap-2 border-t pt-4">

<button
          disabled
          class="cursor-not-allowed rounded-md bg-gray-200 px-3 py-2 text-xs font-medium text-gray-500">
          Reschedule
        </button>

<button
          disabled
          class="cursor-not-allowed rounded-md bg-gray-200 px-3 py-2 text-xs font-medium text-gray-500">
          Cancel
        </button>

<button
          disabled
          class="cursor-not-allowed rounded-md bg-gray-200 px-3 py-2 text-xs font-medium text-gray-500">
          View Prescription
        </button>

</div>

<div class="mt-5 flex items-center justify-between rounded-lg border bg-white px-4 py-3">

<p class="text-sm text-gray-500">
      Showing 1 to 3 of 12 appointments
    </p>

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

</div>

</div>
```

Related Examples

products, show, items
display images, card, products

Rushikesh Latpate

8 months ago

752
barbershop

Ishimwe Shadad

9 months ago

648
Half filled circle with tailwind

Alok

3 years ago

14.3k
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

ishimwe shadad

1 year ago

1.5k
Made a sinup form
Made a sinnup form #sufyandev

Sufyan jutt

7 months ago

448
Chat Bot

Md. Tofayel islam

1 year ago

1.3k
Login Form (Balsamiq Look)

Ahmad Syaifuddin

10 months ago

969
Pricing Plans

ariaw

1 year ago

632
Product cards
Product cards for eCommerce

ehmasuk

10 months ago

1.3k
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Ahita Bisma Adlula

1 year ago

1.2k
Todo List with Dark theme
Todo List with Dark theme

Muzammil Riaz

1 year ago

1.9k
Car booking form
Rental carr booking form to rent a car online

ehmasuk

10 months ago

868