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 99

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

apply

Anonymous

2 weeks ago

127
404 Page Not Found

KULDEEP

1 year ago

2.2k
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/

Achraf Testq

6 months ago

633
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Abid Ullah

2 years ago

2.4k
blog component
good blog

Uwera Dorcas

1 year ago

1.4k
barbershop

Ishimwe Shadad

11 months ago

650
Phone Simulator with Built-in Car Racing Game and Play.
This is a complete virtual smartphone simulator built using HTML, CSS, Tailwind CSS, JavaScript, and Font Awesome Icons and mobile responsive . It provides a realistic phone interface with multiple apps, and the highlight is a fully playable Car Racing Game built right into it where you can actually play the car game.

Arjun Kumar

5 months ago

685
htmlcss1

Anonymous

1 year ago

889
chatbot
is my chatbot

Omer fils ELENGA

11 months ago

1.3k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Nick Girga

1 year ago

2k
Simple count down timer

Gopi Yadav

3 years ago

15.7k
templete
templete

Uwera Dorcas

1 year ago

1.4k