tab2

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 103

Fork Fullscreen

<div class="mb-5 flex items-center justify-between">
    <div>
      <h2 class="text-2xl font-semibold text-gray-800">
        Doctor Management
      </h2>

<p class="text-sm text-gray-500">
        Manage doctors, specializations and availability
      </p>
    </div>

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

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

<div class="md:col-span-2">
        <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">
          Specialization
        </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 Specializations</option>
          <option>General Physician</option>
          <option>Cardiology</option>
          <option>Dermatology</option>
          <option>Orthopedics</option>
          <option>Pediatrics</option>
        </select>
      </div>

</div>

<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">

<div>
        <label class="mb-1 block text-sm font-medium text-gray-700">
          Availability
        </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</option>
          <option>Available</option>
          <option>Unavailable</option>
        </select>
      </div>

<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>Active</option>
          <option>Inactive</option>
        </select>
      </div>

<div class="flex items-end 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"
              >
                Doctor Name
                <span>↕</span>
              </button>
            </th>

<th class="px-4 py-3">
              <button
                class="flex items-center gap-1 font-semibold hover:text-blue-600"
              >
                Code
                <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"
              >
                Specialization
                <span>↕</span>
              </button>
            </th>

<th class="px-4 py-3">
              Contact
            </th>

<th class="px-4 py-3">
              <button
                class="flex items-center gap-1 font-semibold hover:text-blue-600"
              >
                Experience
                <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">
              Availability
            </th>

<th class="px-4 py-3">
              Status
            </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">
                Dr. Rahul Sharma
              </div>

</td>

<td class="px-4 py-4 text-gray-600">
              MedCare Clinic
            </td>

<td class="px-4 py-4 text-gray-600">
              General Physician
            </td>

<div class="text-xs text-gray-500">
                rahul@example.com
              </div>

</td>

<td class="px-4 py-4 text-gray-600">
              8 Years
            </td>

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

</td>

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

</td>

<button
                  class="rounded border border-red-300 px-3 py-1.5 text-xs text-red-600 hover:bg-red-50"
                >
                  Delete
                </button>

</div>

</td>

</tr>

<tr class="hover:bg-gray-50">

<div class="font-medium text-gray-800">
                Dr. Priya Verma
              </div>

</td>

<td class="px-4 py-4 text-gray-600">
              HealthCare Plus
            </td>

<td class="px-4 py-4 text-gray-600">
              Dermatology
            </td>

<div class="text-xs text-gray-500">
                priya@example.com
              </div>

</td>

<td class="px-4 py-4 text-gray-600">
              5 Years
            </td>

<span
                class="rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600"
              >
                Unavailable
              </span>

</td>

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

</td>

<button
                  class="rounded border border-red-300 px-3 py-1.5 text-xs text-red-600 hover:bg-red-50"
                >
                  Delete
                </button>

</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 20 doctors
      </p>

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

</div>

Related Examples

Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Ramkesh Gupta

1 year ago

1k
Hero

ORGIN_DREAMS

1 year ago

2.2k
DSI Studio
...

DSI Studio

1 week ago

9
Invoice template

Shakti

3 years ago

28.8k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Ranit Saha

1 year ago

2.7k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Mohit Prajapat

1 year ago

1.4k
Glassmorphism form

Geoffrey Callaghan

2 years ago

7.5k
background animation
background animation

Anonymous

10 months ago

1.2k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

5 months ago

534
Calculator
A Basic Calculator

Debbie F

2 years ago

2.5k
lachisa
Lachisa is a modern and innovative solution designed to simplify everyday experiences through smart technology, seamless performance, and user-friendly design. It empowers users with efficiency, reliability, and a future-ready approach.

Lokesh H

3 months ago

334
Table Skeleton
Data table skeleton built with Tailwind CSS for admin dashboards and SaaS applications.

JUGENDRA GANGWAR

2 days ago

11