tables

This tailwind example is contributed by John, on 16-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 6

<div class="p-6">
  
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
      <h1 class="text-2xl font-bold text-gray-800">
        Academic Year Management
      </h1>
      <p class="text-sm text-gray-500 mt-1">
        Manage academic years, admission windows and status
      </p>
    </div>

<button
      class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
      + Add Academic Year
    </button>
  </div>

<div class="flex flex-col sm:flex-row gap-4 mb-5">
    <input
      type="text"
      placeholder="Search academic years..."
      class="border border-gray-300 rounded-lg px-4 py-2 w-full sm:w-80
             focus:outline-none focus:ring-2 focus:ring-blue-500" />

<select
      class="border border-gray-300 rounded-lg px-4 py-2
             focus:outline-none focus:ring-2 focus:ring-blue-500">
      <option value="">All Statuses</option>
      <option value="Upcoming">Upcoming</option>
      <option value="Active">Active</option>
      <option value="Closed">Closed</option>
    </select>
  </div>

<div class="overflow-x-auto bg-white rounded-lg shadow">
    <table class="w-full text-sm text-left text-gray-600">
      <thead class="bg-gray-100 text-gray-700">
        <tr>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="flex items-center gap-2 font-semibold">
              Academic Year Code
              <span class="text-gray-400">↕</span>
            </button>
          </th>

<th class="px-5 py-4 whitespace-nowrap">
            <button class="flex items-center gap-2 font-semibold">
              Year Label
              <span class="text-gray-400">↕</span>
            </button>
          </th>

<th class="px-5 py-4 whitespace-nowrap">
            <button class="flex items-center gap-2 font-semibold">
              Start Date
              <span class="text-gray-400">↕</span>
            </button>
          </th>

<th class="px-5 py-4 whitespace-nowrap">
            <button class="flex items-center gap-2 font-semibold">
              Admission Opens
              <span class="text-gray-400">↕</span>
            </button>
          </th>

<th class="px-5 py-4 whitespace-nowrap">
            <button class="flex items-center gap-2 font-semibold">
              Admission Closes
              <span class="text-gray-400">↕</span>
            </button>
          </th>

<th class="px-5 py-4 whitespace-nowrap">
            <button class="flex items-center gap-2 font-semibold">
              Status
              <span class="text-gray-400">↕</span>
            </button>
          </th>

<th class="px-5 py-4 font-semibold">Actions</th>
        </tr>
      </thead>

<tbody>
        
        <tr class="border-b hover:bg-gray-50">
          <td class="px-5 py-4">AY-001</td>
          <td class="px-5 py-4 font-medium text-gray-900">2025-2026</td>
          <td class="px-5 py-4 whitespace-nowrap">01 Apr 2025</td>
          <td class="px-5 py-4 whitespace-nowrap">31 Mar 2026</td>
          <td class="px-5 py-4 whitespace-nowrap">01 Jan 2025</td>
          <td class="px-5 py-4 whitespace-nowrap">31 Mar 2025</td>
          <td class="px-5 py-4">
            <span class="px-3 py-1 rounded-full text-xs
                         bg-gray-100 text-gray-700">
              Closed
            </span>
          </td>
          <td class="px-5 py-4">
            <div class="flex items-center gap-3">
              <button class="text-blue-600 hover:underline">View</button>
              <button class="text-green-600 hover:underline">Edit</button>
              <button class="text-red-600 hover:underline">Delete</button>
            </div>
          </td>
        </tr>

<tr class="border-b hover:bg-gray-50">
          <td class="px-5 py-4">AY-002</td>
          <td class="px-5 py-4 font-medium text-gray-900">2026-2027</td>
          <td class="px-5 py-4 whitespace-nowrap">01 Apr 2026</td>
          <td class="px-5 py-4 whitespace-nowrap">31 Mar 2027</td>
          <td class="px-5 py-4 whitespace-nowrap">01 Jan 2026</td>
          <td class="px-5 py-4 whitespace-nowrap">31 Mar 2026</td>
          <td class="px-5 py-4">
            <span class="px-3 py-1 rounded-full text-xs
                         bg-green-100 text-green-700">
              Active
            </span>
          </td>
          <td class="px-5 py-4">
            <div class="flex items-center gap-3">
              <button class="text-blue-600 hover:underline">View</button>
              <button class="text-green-600 hover:underline">Edit</button>
              <button class="text-red-600 hover:underline">Delete</button>
            </div>
          </td>
        </tr>

<tr class="border-b hover:bg-gray-50">
          <td class="px-5 py-4">AY-003</td>
          <td class="px-5 py-4 font-medium text-gray-900">2027-2028</td>
          <td class="px-5 py-4 whitespace-nowrap">01 Apr 2027</td>
          <td class="px-5 py-4 whitespace-nowrap">31 Mar 2028</td>
          <td class="px-5 py-4 whitespace-nowrap">01 Jan 2027</td>
          <td class="px-5 py-4 whitespace-nowrap">31 Mar 2027</td>
          <td class="px-5 py-4">
            <span class="px-3 py-1 rounded-full text-xs
                         bg-yellow-100 text-yellow-700">
              Upcoming
            </span>
          </td>
          <td class="px-5 py-4">
            <div class="flex items-center gap-3">
              <button class="text-blue-600 hover:underline">View</button>
              <button class="text-green-600 hover:underline">Edit</button>
              <button class="text-red-600 hover:underline">Delete</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

<div class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-5">
    <p class="text-sm text-gray-600">
      Showing 1 to 3 of 3 records
    </p>

<div class="flex items-center gap-2">
      <button
        disabled
        class="border rounded-lg px-3 py-2 text-gray-400 cursor-not-allowed">
        Previous
      </button>

<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
      <h1 class="text-2xl font-bold text-gray-800">School Classes</h1>
      <p class="text-sm text-gray-500 mt-1">
        Manage school classes and fee structure
      </p>
    </div>

<button
      type="button"
      class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
      + Add Class
    </button>
  </div>

<div class="flex flex-col sm:flex-row gap-4 mb-5">
    <input
      type="text"
      placeholder="Search classes..."
      class="border border-gray-300 rounded-lg px-4 py-2 w-full sm:w-80
             focus:outline-none focus:ring-2 focus:ring-blue-500" />

<select
      class="border border-gray-300 rounded-lg px-4 py-2
             focus:outline-none focus:ring-2 focus:ring-blue-500">
      <option value="">All Statuses</option>
      <option value="Active">Active</option>
      <option value="Inactive">Inactive</option>
    </select>
  </div>

<div class="overflow-x-auto bg-white rounded-lg shadow">
    <table class="w-full text-sm text-left text-gray-600">

<thead class="bg-gray-100 text-gray-700">
        <tr>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="font-semibold">Class Code ↕</button>
          </th>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="font-semibold">Academic Year ↕</button>
          </th>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="font-semibold">Grade Level ↕</button>
          </th>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="font-semibold">Section ↕</button>
          </th>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="font-semibold">Seats Available ↕</button>
          </th>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="font-semibold">Admission Fee ↕</button>
          </th>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="font-semibold">Monthly Tuition Fee ↕</button>
          </th>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="font-semibold">Transport Fee ↕</button>
          </th>
          <th class="px-5 py-4 whitespace-nowrap">
            <button class="font-semibold">Status ↕</button>
          </th>
          <th class="px-5 py-4 font-semibold">Actions</th>
        </tr>
      </thead>

<tbody>
        
        <tr class="border-b hover:bg-gray-50">
          <td class="px-5 py-4">CLS-0001</td>
          <td class="px-5 py-4">2026-2027</td>
          <td class="px-5 py-4">Grade 1</td>
          <td class="px-5 py-4">A</td>
          <td class="px-5 py-4">30</td>
          <td class="px-5 py-4 whitespace-nowrap">₹2,000</td>
          <td class="px-5 py-4 whitespace-nowrap">₹1,500</td>
          <td class="px-5 py-4 whitespace-nowrap">₹800</td>
          <td class="px-5 py-4">
            <span class="px-3 py-1 rounded-full text-xs bg-green-100 text-green-700">
              Active
            </span>
          </td>
          <td class="px-5 py-4">
            <div class="flex gap-3">
              <button class="text-blue-600 hover:underline">View</button>
              <button class="text-green-600 hover:underline">Edit</button>
              <button class="text-red-600 hover:underline">Delete</button>
            </div>
          </td>
        </tr>

<tr class="border-b hover:bg-gray-50">
          <td class="px-5 py-4">CLS-0002</td>
          <td class="px-5 py-4">2026-2027</td>
          <td class="px-5 py-4">Grade 1</td>
          <td class="px-5 py-4">B</td>
          <td class="px-5 py-4">25</td>
          <td class="px-5 py-4 whitespace-nowrap">₹2,000</td>
          <td class="px-5 py-4 whitespace-nowrap">₹1,500</td>
          <td class="px-5 py-4 whitespace-nowrap">N/A</td>
          <td class="px-5 py-4">
            <span class="px-3 py-1 rounded-full text-xs bg-green-100 text-green-700">
              Active
            </span>
          </td>
          <td class="px-5 py-4">
            <div class="flex gap-3">
              <button class="text-blue-600 hover:underline">View</button>
              <button class="text-green-600 hover:underline">Edit</button>
              <button class="text-red-600 hover:underline">Delete</button>
            </div>
          </td>
        </tr>

<tr class="border-b hover:bg-gray-50">
          <td class="px-5 py-4">CLS-0003</td>
          <td class="px-5 py-4">2026-2027</td>
          <td class="px-5 py-4">Grade 2</td>
          <td class="px-5 py-4">A</td>
          <td class="px-5 py-4">28</td>
          <td class="px-5 py-4 whitespace-nowrap">₹2,500</td>
          <td class="px-5 py-4 whitespace-nowrap">₹1,700</td>
          <td class="px-5 py-4 whitespace-nowrap">₹900</td>
          <td class="px-5 py-4">
            <span class="px-3 py-1 rounded-full text-xs bg-green-100 text-green-700">
              Active
            </span>
          </td>
          <td class="px-5 py-4">
            <div class="flex gap-3">
              <button class="text-blue-600 hover:underline">View</button>
              <button class="text-green-600 hover:underline">Edit</button>
              <button class="text-red-600 hover:underline">Delete</button>
            </div>
          </td>
        </tr>

<tr class="border-b hover:bg-gray-50">
          <td class="px-5 py-4">CLS-0004</td>
          <td class="px-5 py-4">2026-2027</td>
          <td class="px-5 py-4">Grade 3</td>
          <td class="px-5 py-4">A</td>
          <td class="px-5 py-4">20</td>
          <td class="px-5 py-4 whitespace-nowrap">₹2,500</td>
          <td class="px-5 py-4 whitespace-nowrap">₹1,800</td>
          <td class="px-5 py-4 whitespace-nowrap">₹1,000</td>
          <td class="px-5 py-4">
            <span class="px-3 py-1 rounded-full text-xs bg-gray-100 text-gray-700">
              Inactive
            </span>
          </td>
          <td class="px-5 py-4">
            <div class="flex gap-3">
              <button class="text-blue-600 hover:underline">View</button>
              <button class="text-green-600 hover:underline">Edit</button>
              <button class="text-red-600 hover:underline">Delete</button>
            </div>
          </td>
        </tr>

<tr class="border-b hover:bg-gray-50">
          <td class="px-5 py-4">CLS-0005</td>
          <td class="px-5 py-4">2026-2027</td>
          <td class="px-5 py-4">Grade 4</td>
          <td class="px-5 py-4">A</td>
          <td class="px-5 py-4">32</td>
          <td class="px-5 py-4 whitespace-nowrap">₹3,000</td>
          <td class="px-5 py-4 whitespace-nowrap">₹2,000</td>
          <td class="px-5 py-4 whitespace-nowrap">N/A</td>
          <td class="px-5 py-4">
            <span class="px-3 py-1 rounded-full text-xs bg-green-100 text-green-700">
              Active
            </span>
          </td>
          <td class="px-5 py-4">
            <div class="flex gap-3">
              <button class="text-blue-600 hover:underline">View</button>
              <button class="text-green-600 hover:underline">Edit</button>
              <button class="text-red-600 hover:underline">Delete</button>
            </div>
          </td>
        </tr>

</tbody>
    </table>
  </div>

<div class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-5">
    <p class="text-sm text-gray-600">
      Showing 1 to 5 of 5 records
    </p>

<div class="flex items-center gap-2">
      <button disabled
        class="border rounded-lg px-3 py-2 text-gray-400 cursor-not-allowed">
        Previous
      </button>

</div>

<div class="min-h-screen bg-gray-50 p-6">

<div class="flex flex-col sm:flex-row sm:items-center
              sm:justify-between gap-4 mb-6">
    <div>
      <h1 class="text-2xl font-bold text-gray-800">
        Admission Applications
      </h1>
      <p class="text-sm text-gray-500 mt-1">
        Review and manage student admission applications
      </p>
    </div>
  </div>

<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4
              gap-5 mb-6">

<div class="bg-white rounded-xl border border-gray-200
                shadow-sm p-5">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm text-gray-500">
            Total Applications
          </p>
          <h2 class="text-3xl font-bold text-gray-800 mt-2">
            125
          </h2>
        </div>
        <div class="w-12 h-12 rounded-lg bg-blue-100
                    flex items-center justify-center">
          <svg class="w-6 h-6 text-blue-600" fill="none"
               stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5
                     a2 2 0 012-2h5l5 5v11a2 2 0 01-2 2z"/>
          </svg>
        </div>
      </div>
    </div>

<div class="bg-white rounded-xl border border-gray-200
                shadow-sm p-5">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm text-gray-500">
            Seats Filled per Class
          </p>
          <h2 class="text-3xl font-bold text-gray-800 mt-2">
            78 / 100
          </h2>
          <p class="text-xs text-gray-500 mt-1">
            Across available classes
          </p>
        </div>
        <div class="w-12 h-12 rounded-lg bg-green-100
                    flex items-center justify-center">
          <svg class="w-6 h-6 text-green-600" fill="none"
               stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="2"
                  d="M17 20h5v-2a3 3 0 00-5.356-1.857
                     M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857
                     M7 20H2v-2a3 3 0 015.356-1.857
                     M7 20v-2c0-.656.126-1.283.356-1.857
                     m0 0a5.002 5.002 0 019.288 0
                     M15 7a3 3 0 11-6 0 3 3 0 016 0
                     M21 8a2 2 0 11-4 0 2 2 0 014 0
                     M7 8a2 2 0 11-4 0 2 2 0 014 0"/>
          </svg>
        </div>
      </div>
    </div>

<div class="bg-white rounded-xl border border-gray-200
                shadow-sm p-5">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm text-gray-500">
            Waitlist Count
          </p>
          <h2 class="text-3xl font-bold text-gray-800 mt-2">
            12
          </h2>
        </div>
        <div class="w-12 h-12 rounded-lg bg-amber-100
                    flex items-center justify-center">
          <svg class="w-6 h-6 text-amber-600" fill="none"
               stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </div>
      </div>
    </div>

<div class="bg-white rounded-xl border border-gray-200
                shadow-sm p-5">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm text-gray-500">
            Admission Conversion Rate
          </p>
          <h2 class="text-3xl font-bold text-gray-800 mt-2">
            62.4%
          </h2>
        </div>
        <div class="w-12 h-12 rounded-lg bg-purple-100
                    flex items-center justify-center">
          <svg class="w-6 h-6 text-purple-600" fill="none"
               stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="2"
                  d="M3 3v18h18M18 9l-5 5-4-4-4 4"/>
          </svg>
        </div>
      </div>
    </div>

</div>

<div class="bg-white rounded-xl border border-gray-200
              shadow-sm p-5 mb-6">

<div class="xl:col-span-1">
        <label class="block text-sm font-medium
                      text-gray-700 mb-2">
          Search
        </label>
        <input
          type="text"
          placeholder="Application no. or student name"
          class="w-full rounded-lg border border-gray-300
                 px-3 py-2.5 text-sm focus:outline-none
                 focus:ring-2 focus:ring-blue-500">
      </div>

<div>
        <label class="block text-sm font-medium
                      text-gray-700 mb-2">
          Academic Year
        </label>
        <select
          class="w-full rounded-lg border border-gray-300
                 px-3 py-2.5 text-sm bg-white">
          <option>All Academic Years</option>
          <option>2025-2026</option>
          <option>2026-2027</option>
          <option>2027-2028</option>
        </select>
      </div>

<div>
        <label class="block text-sm font-medium
                      text-gray-700 mb-2">
          Grade Level
        </label>
        <select
          class="w-full rounded-lg border border-gray-300
                 px-3 py-2.5 text-sm bg-white">
          <option>All Grade Levels</option>
          <option>Grade 1</option>
          <option>Grade 2</option>
          <option>Grade 3</option>
          <option>Grade 4</option>
          <option>Grade 5</option>
        </select>
      </div>

<div>
        <label class="block text-sm font-medium
                      text-gray-700 mb-2">
          Class
        </label>
        <select
          class="w-full rounded-lg border border-gray-300
                 px-3 py-2.5 text-sm bg-white">
          <option>All Classes</option>
          <option>Grade 1 - A</option>
          <option>Grade 1 - B</option>
          <option>Grade 2 - A</option>
          <option>Grade 2 - B</option>
          <option>Grade 3 - A</option>
        </select>
      </div>

<div>
        <label class="block text-sm font-medium
                      text-gray-700 mb-2">
          Status
        </label>
        <select
          class="w-full rounded-lg border border-gray-300
                 px-3 py-2.5 text-sm bg-white">
          <option>All Statuses</option>
          <option>Submitted</option>
          <option>Under Review</option>
          <option>Shortlisted</option>
          <option>Interview Scheduled</option>
          <option>Confirmed</option>
          <option>Rejected</option>
          <option>Waitlisted</option>
        </select>
      </div>

<div>
        <label class="block text-sm font-medium
                      text-gray-700 mb-2">
          From Date
        </label>
        <input
          type="date"
          class="w-full rounded-lg border border-gray-300
                 px-3 py-2.5 text-sm">
      </div>

</div>
  </div>

<div class="bg-white rounded-xl border border-gray-200
              shadow-sm overflow-hidden">

<div class="px-5 py-4 border-b border-gray-200">
      <h2 class="text-lg font-semibold text-gray-800">
        Applications List
      </h2>
    </div>

<thead class="bg-gray-100 text-gray-700 text-xs
                      uppercase">
          <tr>
            <th class="px-5 py-4 whitespace-nowrap">
              Application No. ↕
            </th>
            <th class="px-5 py-4 whitespace-nowrap">
              Student Name ↕
            </th>
            <th class="px-5 py-4 whitespace-nowrap">
              Academic Year ↕
            </th>
            <th class="px-5 py-4 whitespace-nowrap">
              Grade / Class ↕
            </th>
            <th class="px-5 py-4 whitespace-nowrap">
              Application Date ↕
            </th>
            <th class="px-5 py-4 whitespace-nowrap">
              Status ↕
            </th>
            <th class="px-5 py-4 whitespace-nowrap">
              Actions
            </th>
          </tr>
        </thead>

<tr class="hover:bg-gray-50">
            <td class="px-5 py-4 font-medium text-gray-800">
              APP-0001
            </td>
            <td class="px-5 py-4 font-medium text-gray-800">
              Aarav Sharma
            </td>
            <td class="px-5 py-4">2026-2027</td>
            <td class="px-5 py-4">Grade 1 - A</td>
            <td class="px-5 py-4 whitespace-nowrap">
              10 Oct 2026
            </td>
            <td class="px-5 py-4">
              <span class="px-2.5 py-1 rounded-full
                           bg-blue-100 text-blue-700
                           text-xs font-medium">
                Submitted
              </span>
            </td>
            <td class="px-5 py-4">
              <div class="flex flex-wrap gap-2">
                <button class="text-blue-600 hover:underline">
                  View
                </button>
                <button class="text-green-600 hover:underline">
                  Shortlist
                </button>
                <button class="text-amber-600 hover:underline">
                  Waitlist
                </button>
              </div>
            </td>
          </tr>

<tr class="hover:bg-gray-50">
            <td class="px-5 py-4 font-medium text-gray-800">
              APP-0002
            </td>
            <td class="px-5 py-4 font-medium text-gray-800">
              Ananya Verma
            </td>
            <td class="px-5 py-4">2026-2027</td>
            <td class="px-5 py-4">Grade 2 - A</td>
            <td class="px-5 py-4 whitespace-nowrap">
              11 Oct 2026
            </td>
            <td class="px-5 py-4">
              <span class="px-2.5 py-1 rounded-full
                           bg-yellow-100 text-yellow-700
                           text-xs font-medium">
                Under Review
              </span>
            </td>
            <td class="px-5 py-4">
              <div class="flex flex-wrap gap-2">
                <button class="text-blue-600 hover:underline">
                  View
                </button>
                <button class="text-green-600 hover:underline">
                  Shortlist
                </button>
                <button class="text-red-600 hover:underline">
                  Reject
                </button>
              </div>
            </td>
          </tr>

<tr class="hover:bg-gray-50">
            <td class="px-5 py-4 font-medium text-gray-800">
              APP-0003
            </td>
            <td class="px-5 py-4 font-medium text-gray-800">
              Rohan Gupta
            </td>
            <td class="px-5 py-4">2026-2027</td>
            <td class="px-5 py-4">Grade 1 - B</td>
            <td class="px-5 py-4 whitespace-nowrap">
              12 Oct 2026
            </td>
            <td class="px-5 py-4">
              <span class="px-2.5 py-1 rounded-full
                           bg-purple-100 text-purple-700
                           text-xs font-medium">
                Shortlisted
              </span>
            </td>
            <td class="px-5 py-4">
              <div class="flex flex-wrap gap-2">
                <button class="text-blue-600 hover:underline">
                  View
                </button>
                <button class="text-purple-600 hover:underline">
                  Schedule Interview
                </button>
                <button class="text-red-600 hover:underline">
                  Reject
                </button>
              </div>
            </td>
          </tr>

<tr class="hover:bg-gray-50">
            <td class="px-5 py-4 font-medium text-gray-800">
              APP-0004
            </td>
            <td class="px-5 py-4 font-medium text-gray-800">
              Priya Singh
            </td>
            <td class="px-5 py-4">2026-2027</td>
            <td class="px-5 py-4">Grade 3 - A</td>
            <td class="px-5 py-4 whitespace-nowrap">
              13 Oct 2026
            </td>
            <td class="px-5 py-4">
              <span class="px-2.5 py-1 rounded-full
                           bg-indigo-100 text-indigo-700
                           text-xs font-medium">
                Interview Scheduled
              </span>
            </td>
            <td class="px-5 py-4">
              <div class="flex flex-wrap gap-2">
                <button class="text-blue-600 hover:underline">
                  View
                </button>
                <button class="text-green-600 hover:underline">
                  Confirm
                </button>
                <button class="text-red-600 hover:underline">
                  Reject
                </button>
              </div>
            </td>
          </tr>

<tr class="hover:bg-gray-50">
            <td class="px-5 py-4 font-medium text-gray-800">
              APP-0005
            </td>
            <td class="px-5 py-4 font-medium text-gray-800">
              Kabir Malhotra
            </td>
            <td class="px-5 py-4">2026-2027</td>
            <td class="px-5 py-4">Grade 2 - B</td>
            <td class="px-5 py-4 whitespace-nowrap">
              14 Oct 2026
            </td>
            <td class="px-5 py-4">
              <span class="px-2.5 py-1 rounded-full
                           bg-green-100 text-green-700
                           text-xs font-medium">
                Confirmed
              </span>
            </td>
            <td class="px-5 py-4">
              <div class="flex flex-wrap gap-2">
                <button class="text-blue-600 hover:underline">
                  View
                </button>
              </div>
            </td>
          </tr>

<tr class="hover:bg-gray-50">
            <td class="px-5 py-4 font-medium text-gray-800">
              APP-0006
            </td>
            <td class="px-5 py-4 font-medium text-gray-800">
              Meera Kapoor
            </td>
            <td class="px-5 py-4">2026-2027</td>
            <td class="px-5 py-4">Grade 1 - A</td>
            <td class="px-5 py-4 whitespace-nowrap">
              14 Oct 2026
            </td>
            <td class="px-5 py-4">
              <span class="px-2.5 py-1 rounded-full
                           bg-amber-100 text-amber-700
                           text-xs font-medium">
                Waitlisted
              </span>
            </td>
            <td class="px-5 py-4">
              <div class="flex flex-wrap gap-2">
                <button class="text-blue-600 hover:underline">
                  View
                </button>
                <button class="text-green-600 hover:underline">
                  Confirm
                </button>
                <button class="text-red-600 hover:underline">
                  Reject
                </button>
              </div>
            </td>
          </tr>

</tbody>
      </table>
    </div>

<div class="flex flex-col sm:flex-row
                items-center justify-between gap-4
                px-5 py-4 border-t border-gray-200">

<p class="text-sm text-gray-500">
        Showing 1 to 6 of 125 applications
      </p>

<div class="flex items-center gap-2">
        <button disabled
          class="px-3 py-2 border rounded-lg text-sm
                 text-gray-400 cursor-not-allowed">
          Previous
        </button>

</div>
</div>

Related Examples

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
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.7k
Drag & Drop File Upload with Progress & Image Preview

JUGENDRA GANGWAR

1 month ago

144
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

gidy

11 months ago

1.2k
tab6
table

Anonymous

3 weeks ago

97
GenzeStack Dumpy - Interactive Login Page with Mascot
A playful, fully responsive Tailwind CSS login component featuring "Dumpy" the GenzeStack mascot with interactive status tabs, custom SVG graphics, and dark mode support.

Sayista Yazdani

6 days ago

128
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k
Clean AI Workspace Dashboard
A pristine, light-mode SaaS interface designed for AI chat applications. It features a structured three-column layout: a navigation sidebar with a theme toggle, a central workspace showcasing a "Welcome" state with colorful quick-action entry cards and a floating input bar, and a right-hand sidebar for project context. The design relies on soft grays, subtle borders (border-gray-200), and ample whitespace to create a focused, professional productivity environment.

Hamza Atig

9 months ago

962
Free Tailwind components,
Free Tailwind components,

Omer fils ELENGA

1 week ago

31
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
card

Raul antonio de la cruz hernandez

9 months ago

752
Responsive layout with header, main body, aside (sidebar) and footer

Ahmed Malik

3 years ago

13k