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 97

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

chatbot
is my chatbot

Omer fils ELENGA

11 months ago

1.3k
Privacy Policy
Privacy Policy

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.1k
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
button animation
button animation big

QQ-VVN

1 year ago

1.5k
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Rathanak Phan

1 year ago

812
Atlas AI Analyst Workspace
A premium, document-centric AI chat interface that moves beyond standard bubbles into a professional "editor" layout. Designed for power users, it features a floating glassmorphic command bar, a dedicated "Memory & Context" sidebar with interactive widgets, and rich data visualization blocks. The aesthetic combines a deep charcoal base with luxury bronze/orange accents, making it ideal for high-end SaaS tools, financial analysis dashboards, or enterprise AI assistants.

Hamza Atig

9 months ago

540
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
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)

5 months ago

476
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.4k
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

1 month ago

34
profile
user profile

gidy

1 year ago

1.1k
paginate
filter sort and paginate

aditya_sharma

1 month ago

46