<div class="p-6">
<!-- ========================================== -->
<!-- PAGE HEADER -->
<!-- ========================================== -->
<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">
Instructors
</h1>
<p class="text-sm text-gray-500 mt-1">
Manage instructors and their information
</p>
</div>
<!-- ADD INSTRUCTOR -->
<button
type="button"
class="px-4 py-2 bg-gray-800 text-white rounded-lg
hover:bg-gray-700 transition">
+ Add Instructor
</button>
</div>
<!-- ========================================== -->
<!-- SEARCH & FILTER -->
<!-- ========================================== -->
<div class="bg-white border border-gray-200 rounded-xl p-4 mb-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- SEARCH -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Search
</label>
<input
type="text"
placeholder="Search by name, code or email..."
class="w-full px-4 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-400">
</div>
<!-- STATUS FILTER -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Status
</label>
<select
class="w-full px-4 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-400">
<option>All Status</option>
<option>Active</option>
<option>Inactive</option>
</select>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- TABLE -->
<!-- ========================================== -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<!-- ====================================== -->
<!-- TABLE HEADER -->
<!-- ====================================== -->
<thead class="bg-gray-50 border-b border-gray-200">
<tr>
<!-- SORT: CODE -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Instructor Code
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- SORT: NAME -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Instructor Name
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- SORT: EMAIL -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Email
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- PHONE -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
Phone
</th>
<!-- EXPERTISE -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
Expertise
</th>
<!-- QUALIFICATIONS -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
Qualifications
</th>
<!-- SORT: EXPERIENCE -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Experience
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- SORT: STATUS -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Status
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- ACTIONS -->
<th class="px-6 py-4 font-semibold text-gray-600 text-center whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- ====================================== -->
<!-- TABLE BODY -->
<!-- ====================================== -->
<tbody class="divide-y divide-gray-200">
<!-- ==================================== -->
<!-- ROW 1 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<!-- CODE -->
<td class="px-6 py-4 font-medium text-gray-700">
INS-001
</td>
<!-- NAME -->
<td class="px-6 py-4 font-medium text-gray-800">
John Smith
</td>
<!-- EMAIL -->
<td class="px-6 py-4 text-gray-600">
john@example.com
</td>
<!-- PHONE -->
<td class="px-6 py-4 text-gray-600">
9876543210
</td>
<!-- EXPERTISE -->
<td class="px-6 py-4 text-gray-600">
Web Development
</td>
<!-- QUALIFICATIONS -->
<td class="px-6 py-4 text-gray-600">
M.Tech Computer Science
</td>
<!-- EXPERIENCE -->
<td class="px-6 py-4 text-gray-600">
5 Years
</td>
<!-- STATUS -->
<td class="px-6 py-4">
<span
class="inline-flex px-3 py-1 rounded-full
text-xs font-medium
bg-green-100 text-green-700">
Active
</span>
</td>
<!-- ACTIONS -->
<td class="px-6 py-4">
<div class="flex items-center justify-center gap-2">
<!-- VIEW -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-blue-100 text-blue-700
hover:bg-blue-200 transition">
View
</button>
<!-- EDIT -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-yellow-100 text-yellow-700
hover:bg-yellow-200 transition">
Edit
</button>
<!-- DELETE -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-red-100 text-red-700
hover:bg-red-200 transition">
Delete
</button>
</div>
</td>
</tr>
<!-- ==================================== -->
<!-- ROW 2 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 font-medium text-gray-700">
INS-002
</td>
<td class="px-6 py-4 font-medium text-gray-800">
Sarah Wilson
</td>
<td class="px-6 py-4 text-gray-600">
sarah@example.com
</td>
<td class="px-6 py-4 text-gray-600">
9123456780
</td>
<td class="px-6 py-4 text-gray-600">
Data Science
</td>
<td class="px-6 py-4 text-gray-600">
PhD Data Science
</td>
<td class="px-6 py-4 text-gray-600">
8 Years
</td>
<td class="px-6 py-4">
<span
class="inline-flex px-3 py-1 rounded-full
text-xs font-medium
bg-gray-100 text-gray-700">
Inactive
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center justify-center gap-2">
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-blue-100 text-blue-700
hover:bg-blue-200 transition">
View
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-yellow-100 text-yellow-700
hover:bg-yellow-200 transition">
Edit
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-red-100 text-red-700
hover:bg-red-200 transition">
Delete
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- ========================================== -->
<!-- PAGINATION -->
<!-- ========================================== -->
<div
class="flex flex-col sm:flex-row sm:items-center
sm:justify-between gap-4 px-6 py-4
border-t border-gray-200">
<!-- RECORD INFO -->
<p class="text-sm text-gray-500">
Showing 1 to 10 of 25 instructors
</p>
<!-- PAGE BUTTONS -->
<div class="flex items-center gap-2">
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Previous
</button>
<button
type="button"
class="px-3 py-1.5 bg-gray-800
text-white rounded-lg text-sm">
1
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
2
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
3
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Next
</button>
</div>
</div>
</div>
</div>
<div class="p-6">
<!-- ========================================== -->
<!-- PAGE HEADER -->
<!-- ========================================== -->
<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">
Courses
</h1>
<p class="text-sm text-gray-500 mt-1">
Manage courses, instructors and lessons
</p>
</div>
<!-- ADD COURSE -->
<button
type="button"
class="px-4 py-2 bg-gray-800 text-white rounded-lg
hover:bg-gray-700 transition">
+ Add Course
</button>
</div>
<!-- ========================================== -->
<!-- SEARCH & FILTER -->
<!-- ========================================== -->
<div class="bg-white border border-gray-200 rounded-xl p-4 mb-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- SEARCH -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Search
</label>
<input
type="text"
placeholder="Search by course title or code..."
class="w-full px-4 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-400">
</div>
<!-- STATUS -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Status
</label>
<select
class="w-full px-4 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-400">
<option>All Status</option>
<option>Draft</option>
<option>Active</option>
<option>Inactive</option>
<option>Archived</option>
</select>
</div>
<!-- CATEGORY -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Category
</label>
<select
class="w-full px-4 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-400">
<option>All Categories</option>
<option>Programming</option>
<option>Data Science</option>
<option>Web Design</option>
<option>Business</option>
<option>Personal Development</option>
</select>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- COURSE TABLE -->
<!-- ========================================== -->
<div
class="bg-white border border-gray-200 rounded-xl
shadow-sm overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<!-- ====================================== -->
<!-- TABLE HEADER -->
<!-- ====================================== -->
<thead class="bg-gray-50 border-b border-gray-200">
<tr>
<!-- COURSE CODE - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Course Code
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- COURSE TITLE - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Course Title
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- CATEGORY -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
Category
</th>
<!-- INSTRUCTOR - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Instructor
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- DURATION - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Duration
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- PRICE - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Price
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- MAX STUDENTS -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
Max Students
</th>
<!-- START DATE - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Start Date
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- STATUS - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Status
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- ACTIONS -->
<th class="px-6 py-4 font-semibold text-gray-600 text-center whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- ====================================== -->
<!-- TABLE BODY -->
<!-- ====================================== -->
<tbody class="divide-y divide-gray-200">
<!-- ==================================== -->
<!-- ROW 1 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<!-- COURSE CODE -->
<td class="px-6 py-4 font-medium text-gray-700">
CRS-001
</td>
<!-- COURSE TITLE -->
<td class="px-6 py-4 font-medium text-gray-800">
Full Stack Web Development
</td>
<!-- CATEGORY -->
<td class="px-6 py-4 text-gray-600">
Programming
</td>
<!-- INSTRUCTOR -->
<td class="px-6 py-4 text-gray-600">
John Smith
</td>
<!-- DURATION -->
<td class="px-6 py-4 text-gray-600">
40 Hours
</td>
<!-- PRICE -->
<td class="px-6 py-4 font-medium text-gray-700">
₹5,000
</td>
<!-- MAX STUDENTS -->
<td class="px-6 py-4 text-gray-600">
50
</td>
<!-- START DATE -->
<td class="px-6 py-4 text-gray-600">
20 Sep 2026
</td>
<!-- STATUS -->
<td class="px-6 py-4">
<span
class="inline-flex px-3 py-1 rounded-full
text-xs font-medium
bg-green-100 text-green-700">
Active
</span>
</td>
<!-- ACTIONS -->
<td class="px-6 py-4">
<div class="flex items-center justify-center gap-2">
<!-- VIEW -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-blue-100 text-blue-700
hover:bg-blue-200 transition">
View
</button>
<!-- EDIT -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-yellow-100 text-yellow-700
hover:bg-yellow-200 transition">
Edit
</button>
<!-- LESSONS -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-purple-100 text-purple-700
hover:bg-purple-200 transition">
Lessons
</button>
<!-- DELETE -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-red-100 text-red-700
hover:bg-red-200 transition">
Delete
</button>
</div>
</td>
</tr>
<!-- ==================================== -->
<!-- ROW 2 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 font-medium text-gray-700">
CRS-002
</td>
<td class="px-6 py-4 font-medium text-gray-800">
Introduction to Data Science
</td>
<td class="px-6 py-4 text-gray-600">
Data Science
</td>
<td class="px-6 py-4 text-gray-600">
Sarah Wilson
</td>
<td class="px-6 py-4 text-gray-600">
30 Hours
</td>
<td class="px-6 py-4 font-medium text-gray-700">
Free
</td>
<td class="px-6 py-4 text-gray-600">
100
</td>
<td class="px-6 py-4 text-gray-600">
25 Sep 2026
</td>
<td class="px-6 py-4">
<span
class="inline-flex px-3 py-1 rounded-full
text-xs font-medium
bg-yellow-100 text-yellow-700">
Draft
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center justify-center gap-2">
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-blue-100 text-blue-700
hover:bg-blue-200 transition">
View
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-yellow-100 text-yellow-700
hover:bg-yellow-200 transition">
Edit
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-purple-100 text-purple-700
hover:bg-purple-200 transition">
Lessons
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-red-100 text-red-700
hover:bg-red-200 transition">
Delete
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- ========================================== -->
<!-- PAGINATION -->
<!-- ========================================== -->
<div
class="flex flex-col sm:flex-row sm:items-center
sm:justify-between gap-4 px-6 py-4
border-t border-gray-200">
<!-- RECORD INFO -->
<p class="text-sm text-gray-500">
Showing 1 to 10 of 25 courses
</p>
<!-- PAGE BUTTONS -->
<div class="flex items-center gap-2">
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Previous
</button>
<button
type="button"
class="px-3 py-1.5 bg-gray-800
text-white rounded-lg text-sm">
1
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
2
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
3
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Next
</button>
</div>
</div>
</div>
</div>
<div class="p-6">
<!-- ========================================== -->
<!-- PAGE HEADER -->
<!-- ========================================== -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800">
Enrollments
</h1>
<p class="text-sm text-gray-500 mt-1">
Manage student course enrollments
</p>
</div>
<!-- ========================================== -->
<!-- DASHBOARD CARDS -->
<!-- ========================================== -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-6">
<!-- TOTAL ENROLLMENTS -->
<div
class="bg-white border border-gray-200 rounded-xl
shadow-sm p-5">
<p class="text-sm text-gray-500">
Total Enrollments
</p>
<h2 class="text-2xl font-bold text-gray-800 mt-2">
1,250
</h2>
<p class="text-xs text-gray-500 mt-2">
All course enrollments
</p>
</div>
<!-- REVENUE -->
<div
class="bg-white border border-gray-200 rounded-xl
shadow-sm p-5">
<p class="text-sm text-gray-500">
Revenue from Paid Courses
</p>
<h2 class="text-2xl font-bold text-gray-800 mt-2">
₹2,45,000
</h2>
<p class="text-xs text-gray-500 mt-2">
Total enrollment revenue
</p>
</div>
<!-- AVERAGE STUDENTS -->
<div
class="bg-white border border-gray-200 rounded-xl
shadow-sm p-5">
<p class="text-sm text-gray-500">
Average Students per Course
</p>
<h2 class="text-2xl font-bold text-gray-800 mt-2">
42
</h2>
<p class="text-xs text-gray-500 mt-2">
Average enrolled students
</p>
</div>
</div>
<!-- ========================================== -->
<!-- SEARCH & FILTERS -->
<!-- ========================================== -->
<div
class="bg-white border border-gray-200
rounded-xl p-4 mb-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
<!-- SEARCH -->
<div class="lg:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">
Search
</label>
<input
type="text"
placeholder="Search student, course or enrollment..."
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
</div>
<!-- COURSE FILTER -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Course
</label>
<select
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
<option>All Courses</option>
<option>Full Stack Web Development</option>
<option>Introduction to Data Science</option>
<option>UI/UX Design</option>
</select>
</div>
<!-- INSTRUCTOR FILTER -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Instructor
</label>
<select
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
<option>All Instructors</option>
<option>John Smith</option>
<option>Sarah Wilson</option>
<option>David Brown</option>
</select>
</div>
<!-- STATUS FILTER -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Status
</label>
<select
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
<option>All Status</option>
<option>Enrolled</option>
<option>Active</option>
<option>Completed</option>
<option>Dropped</option>
</select>
</div>
</div>
<!-- DATE FILTER -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<!-- FROM DATE -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Enrollment Date From
</label>
<input
type="date"
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
</div>
<!-- TO DATE -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Enrollment Date To
</label>
<input
type="date"
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
</div>
</div>
</div>
<!-- ========================================== -->
<!-- ENROLLMENT TABLE -->
<!-- ========================================== -->
<div
class="bg-white border border-gray-200
rounded-xl shadow-sm overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<!-- ====================================== -->
<!-- TABLE HEADER -->
<!-- ====================================== -->
<thead class="bg-gray-50 border-b border-gray-200">
<tr>
<!-- ENROLLMENT ID - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Enrollment ID
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- STUDENT - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Student
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- COURSE - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Course
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- INSTRUCTOR -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
Instructor
</th>
<!-- ENROLLMENT DATE - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Enrollment Date
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- STATUS - SORT -->
<th class="px-6 py-4 font-semibold text-gray-600 whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2 hover:text-gray-900">
Status
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- ACTIONS -->
<th
class="px-6 py-4 font-semibold text-gray-600
text-center whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- ====================================== -->
<!-- TABLE BODY -->
<!-- ====================================== -->
<tbody class="divide-y divide-gray-200">
<!-- ==================================== -->
<!-- ROW 1 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<!-- ENROLLMENT ID -->
<td class="px-6 py-4 font-medium text-gray-700">
ENR-001
</td>
<!-- STUDENT -->
<td class="px-6 py-4">
<div class="font-medium text-gray-800">
Rahul Sharma
</div>
<div class="text-xs text-gray-500">
rahul@example.com
</div>
</td>
<!-- COURSE -->
<td class="px-6 py-4 font-medium text-gray-700">
Full Stack Web Development
</td>
<!-- INSTRUCTOR -->
<td class="px-6 py-4 text-gray-600">
John Smith
</td>
<!-- ENROLLMENT DATE -->
<td class="px-6 py-4 text-gray-600">
02 Sep 2026
</td>
<!-- STATUS -->
<td class="px-6 py-4">
<span
class="inline-flex px-3 py-1 rounded-full
text-xs font-medium
bg-blue-100 text-blue-700">
Enrolled
</span>
</td>
<!-- ACTIONS -->
<td class="px-6 py-4">
<div class="flex items-center justify-center gap-2">
<!-- VIEW -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-blue-100 text-blue-700
hover:bg-blue-200 transition">
View
</button>
<!-- UPDATE STATUS -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-yellow-100 text-yellow-700
hover:bg-yellow-200 transition">
Update Status
</button>
<!-- CANCEL -->
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-red-100 text-red-700
hover:bg-red-200 transition">
Cancel
</button>
</div>
</td>
</tr>
<!-- ==================================== -->
<!-- ROW 2 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 font-medium text-gray-700">
ENR-002
</td>
<td class="px-6 py-4">
<div class="font-medium text-gray-800">
Priya Singh
</div>
<div class="text-xs text-gray-500">
priya@example.com
</div>
</td>
<td class="px-6 py-4 font-medium text-gray-700">
Introduction to Data Science
</td>
<td class="px-6 py-4 text-gray-600">
Sarah Wilson
</td>
<td class="px-6 py-4 text-gray-600">
28 Aug 2026
</td>
<td class="px-6 py-4">
<span
class="inline-flex px-3 py-1 rounded-full
text-xs font-medium
bg-green-100 text-green-700">
Active
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center justify-center gap-2">
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-blue-100 text-blue-700
hover:bg-blue-200 transition">
View
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-yellow-100 text-yellow-700
hover:bg-yellow-200 transition">
Update Status
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-red-100 text-red-700
hover:bg-red-200 transition">
Cancel
</button>
</div>
</td>
</tr>
<!-- ==================================== -->
<!-- ROW 3 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 font-medium text-gray-700">
ENR-003
</td>
<td class="px-6 py-4">
<div class="font-medium text-gray-800">
Amit Kumar
</div>
<div class="text-xs text-gray-500">
amit@example.com
</div>
</td>
<td class="px-6 py-4 font-medium text-gray-700">
UI/UX Design
</td>
<td class="px-6 py-4 text-gray-600">
David Brown
</td>
<td class="px-6 py-4 text-gray-600">
20 Aug 2026
</td>
<td class="px-6 py-4">
<span
class="inline-flex px-3 py-1 rounded-full
text-xs font-medium
bg-gray-100 text-gray-700">
Completed
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center justify-center gap-2">
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-blue-100 text-blue-700
hover:bg-blue-200 transition">
View
</button>
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-yellow-100 text-yellow-700
hover:bg-yellow-200 transition">
Update Status
</button>
</div>
</td>
</tr>
<!-- ==================================== -->
<!-- ROW 4 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 font-medium text-gray-700">
ENR-004
</td>
<td class="px-6 py-4">
<div class="font-medium text-gray-800">
Neha Verma
</div>
<div class="text-xs text-gray-500">
neha@example.com
</div>
</td>
<td class="px-6 py-4 font-medium text-gray-700">
Business Fundamentals
</td>
<td class="px-6 py-4 text-gray-600">
Michael Lee
</td>
<td class="px-6 py-4 text-gray-600">
15 Aug 2026
</td>
<td class="px-6 py-4">
<span
class="inline-flex px-3 py-1 rounded-full
text-xs font-medium
bg-red-100 text-red-700">
Dropped
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center justify-center gap-2">
<button
type="button"
class="px-3 py-1.5 text-xs font-medium
rounded-lg bg-blue-100 text-blue-700
hover:bg-blue-200 transition">
View
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- ========================================== -->
<!-- PAGINATION -->
<!-- ========================================== -->
<div
class="flex flex-col sm:flex-row
sm:items-center sm:justify-between
gap-4 px-6 py-4
border-t border-gray-200">
<!-- RECORD INFO -->
<p class="text-sm text-gray-500">
Showing 1 to 10 of 1250 enrollments
</p>
<!-- PAGE BUTTONS -->
<div class="flex items-center gap-2">
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Previous
</button>
<button
type="button"
class="px-3 py-1.5 bg-gray-800
text-white rounded-lg text-sm">
1
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
2
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
3
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Next
</button>
</div>
</div>
</div>
</div>
<div class="p-6">
<!-- ========================================== -->
<!-- PAGE HEADER -->
<!-- ========================================== -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800">
Browse Courses
</h1>
<p class="text-sm text-gray-500 mt-1">
Explore and enroll in available courses
</p>
</div>
<!-- ========================================== -->
<!-- SEARCH & FILTERS -->
<!-- ========================================== -->
<div
class="bg-white border border-gray-200
rounded-xl p-4 mb-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- SEARCH -->
<div class="lg:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">
Search Courses
</label>
<input
type="text"
placeholder="Search by course title..."
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
</div>
<!-- CATEGORY -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Category
</label>
<select
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
<option>All Categories</option>
<option>Programming</option>
<option>Data Science</option>
<option>Web Design</option>
<option>Business</option>
<option>Personal Development</option>
</select>
</div>
<!-- PRICE -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Price
</label>
<select
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
<option>All Courses</option>
<option>Free</option>
<option>Paid</option>
</select>
</div>
<!-- INSTRUCTOR -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Instructor
</label>
<select
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
<option>All Instructors</option>
<option>John Smith</option>
<option>Sarah Wilson</option>
<option>David Brown</option>
</select>
</div>
<!-- DURATION -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Duration
</label>
<select
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
<option>All Durations</option>
<option>0 - 10 Hours</option>
<option>11 - 20 Hours</option>
<option>21 - 40 Hours</option>
<option>40+ Hours</option>
</select>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- COURSE LIST -->
<!-- ========================================== -->
<div
class="bg-white border border-gray-200
rounded-xl shadow-sm overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<!-- ====================================== -->
<!-- TABLE HEADER -->
<!-- ====================================== -->
<thead class="bg-gray-50 border-b border-gray-200">
<tr>
<!-- COURSE TITLE - SORT -->
<th
class="px-6 py-4 font-semibold text-gray-600
whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2
hover:text-gray-900">
Course Title
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- INSTRUCTOR - SORT -->
<th
class="px-6 py-4 font-semibold text-gray-600
whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2
hover:text-gray-900">
Instructor
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- CATEGORY - SORT -->
<th
class="px-6 py-4 font-semibold text-gray-600
whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2
hover:text-gray-900">
Category
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- DURATION - SORT -->
<th
class="px-6 py-4 font-semibold text-gray-600
whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2
hover:text-gray-900">
Duration
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- PRICE - SORT -->
<th
class="px-6 py-4 font-semibold text-gray-600
whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2
hover:text-gray-900">
Price
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- STUDENT COUNT - SORT -->
<th
class="px-6 py-4 font-semibold text-gray-600
whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2
hover:text-gray-900">
Students
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- RATING - SORT -->
<th
class="px-6 py-4 font-semibold text-gray-600
whitespace-nowrap">
<button
type="button"
class="flex items-center gap-2
hover:text-gray-900">
Rating
<span class="text-gray-400">
↕
</span>
</button>
</th>
<!-- ACTION -->
<th
class="px-6 py-4 font-semibold text-gray-600
text-center whitespace-nowrap">
Action
</th>
</tr>
</thead>
<!-- ====================================== -->
<!-- TABLE BODY -->
<!-- ====================================== -->
<tbody class="divide-y divide-gray-200">
<!-- ==================================== -->
<!-- COURSE 1 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<!-- COURSE TITLE -->
<td class="px-6 py-5">
<div class="font-semibold text-gray-800">
Full Stack Web Development
</div>
<div class="text-xs text-gray-500 mt-1">
Complete frontend and backend development
</div>
</td>
<!-- INSTRUCTOR -->
<td class="px-6 py-5 text-gray-600">
John Smith
</td>
<!-- CATEGORY -->
<td class="px-6 py-5">
<span
class="inline-flex px-3 py-1
rounded-full text-xs font-medium
bg-blue-100 text-blue-700">
Programming
</span>
</td>
<!-- DURATION -->
<td class="px-6 py-5 text-gray-600">
40 Hours
</td>
<!-- PRICE -->
<td class="px-6 py-5 font-semibold text-gray-800">
₹5,000
</td>
<!-- STUDENTS -->
<td class="px-6 py-5 text-gray-600">
35
</td>
<!-- RATING -->
<td class="px-6 py-5">
<div class="flex items-center gap-1">
<span class="text-yellow-500">
★
</span>
<span class="font-medium text-gray-700">
4.8
</span>
</div>
</td>
<!-- ACTION -->
<td class="px-6 py-5 text-center">
<button
type="button"
class="px-4 py-2 bg-gray-800
text-white rounded-lg
hover:bg-gray-700 transition">
View Details
</button>
</td>
</tr>
<!-- ==================================== -->
<!-- COURSE 2 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-5">
<div class="font-semibold text-gray-800">
Introduction to Data Science
</div>
<div class="text-xs text-gray-500 mt-1">
Learn data analysis and machine learning basics
</div>
</td>
<td class="px-6 py-5 text-gray-600">
Sarah Wilson
</td>
<td class="px-6 py-5">
<span
class="inline-flex px-3 py-1
rounded-full text-xs font-medium
bg-purple-100 text-purple-700">
Data Science
</span>
</td>
<td class="px-6 py-5 text-gray-600">
30 Hours
</td>
<td class="px-6 py-5 font-semibold text-green-600">
Free
</td>
<td class="px-6 py-5 text-gray-600">
72
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-1">
<span class="text-yellow-500">
★
</span>
<span class="font-medium text-gray-700">
4.6
</span>
</div>
</td>
<td class="px-6 py-5 text-center">
<button
type="button"
class="px-4 py-2 bg-gray-800
text-white rounded-lg
hover:bg-gray-700 transition">
View Details
</button>
</td>
</tr>
<!-- ==================================== -->
<!-- COURSE 3 -->
<!-- ==================================== -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-5">
<div class="font-semibold text-gray-800">
UI/UX Design Fundamentals
</div>
<div class="text-xs text-gray-500 mt-1">
Learn modern user interface and experience design
</div>
</td>
<td class="px-6 py-5 text-gray-600">
David Brown
</td>
<td class="px-6 py-5">
<span
class="inline-flex px-3 py-1
rounded-full text-xs font-medium
bg-pink-100 text-pink-700">
Web Design
</span>
</td>
<td class="px-6 py-5 text-gray-600">
20 Hours
</td>
<td class="px-6 py-5 font-semibold text-gray-800">
₹2,500
</td>
<td class="px-6 py-5 text-gray-600">
28
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-1">
<span class="text-yellow-500">
★
</span>
<span class="font-medium text-gray-700">
4.7
</span>
</div>
</td>
<td class="px-6 py-5 text-center">
<button
type="button"
class="px-4 py-2 bg-gray-800
text-white rounded-lg
hover:bg-gray-700 transition">
View Details
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- ========================================== -->
<!-- PAGINATION -->
<!-- ========================================== -->
<div
class="flex flex-col sm:flex-row
sm:items-center sm:justify-between
gap-4 px-6 py-4
border-t border-gray-200">
<!-- RECORD INFO -->
<p class="text-sm text-gray-500">
Showing 1 to 10 of 45 courses
</p>
<!-- PAGE BUTTONS -->
<div class="flex items-center gap-2">
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Previous
</button>
<button
type="button"
class="px-3 py-1.5 bg-gray-800
text-white rounded-lg text-sm">
1
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
2
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
3
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Next
</button>
</div>
</div>
</div>
</div>
<div class="p-6">
<!-- ========================================== -->
<!-- PAGE HEADER -->
<!-- ========================================== -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800">
My Courses
</h1>
<p class="text-sm text-gray-500 mt-1">
View and manage your enrolled courses
</p>
</div>
<!-- ========================================== -->
<!-- SEARCH -->
<!-- ========================================== -->
<div
class="bg-white border border-gray-200
rounded-xl p-4 mb-6">
<div class="max-w-xl">
<label class="block text-sm font-medium text-gray-700 mb-1">
Search Courses
</label>
<input
type="text"
placeholder="Search by course title or instructor..."
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:outline-none
focus:ring-2 focus:ring-gray-400">
</div>
</div>
<!-- ========================================== -->
<!-- COURSE GRID -->
<!-- ========================================== -->
<div
class="grid grid-cols-1 md:grid-cols-2
xl:grid-cols-3 gap-6">
<!-- ======================================== -->
<!-- COURSE CARD 1 -->
<!-- ======================================== -->
<div
class="bg-white border border-gray-200
rounded-xl shadow-sm overflow-hidden
hover:shadow-md transition">
<!-- COURSE HEADER -->
<div class="p-5 border-b border-gray-100">
<div class="flex items-start justify-between gap-3">
<div>
<h2 class="text-lg font-semibold text-gray-800">
Full Stack Web Development
</h2>
<p class="text-sm text-gray-500 mt-1">
John Smith
</p>
</div>
<!-- STATUS -->
<span
class="shrink-0 inline-flex px-3 py-1
rounded-full text-xs font-medium
bg-green-100 text-green-700">
Active
</span>
</div>
</div>
<!-- COURSE DETAILS -->
<div class="p-5 space-y-3">
<!-- INSTRUCTOR -->
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Instructor
</span>
<span class="text-sm font-medium text-gray-700">
John Smith
</span>
</div>
<!-- ENROLLMENT DATE -->
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Enrollment Date
</span>
<span class="text-sm font-medium text-gray-700">
02 Sep 2026
</span>
</div>
<!-- LAST ACCESSED -->
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Last Accessed
</span>
<span class="text-sm font-medium text-gray-700">
Today
</span>
</div>
</div>
<!-- ACTIONS -->
<div class="p-5 pt-0">
<div class="flex flex-wrap gap-2">
<!-- OPEN COURSE -->
<button
type="button"
class="flex-1 min-w-[120px]
px-3 py-2 text-sm font-medium
bg-gray-800 text-white rounded-lg
hover:bg-gray-700 transition">
Open Course
</button>
<!-- LEAVE REVIEW -->
<button
type="button"
class="px-3 py-2 text-sm font-medium
bg-blue-100 text-blue-700
rounded-lg hover:bg-blue-200 transition">
Leave Review
</button>
<!-- UNENROLL -->
<button
type="button"
class="px-3 py-2 text-sm font-medium
bg-red-100 text-red-700
rounded-lg hover:bg-red-200 transition">
Unenroll
</button>
</div>
</div>
</div>
<!-- ======================================== -->
<!-- COURSE CARD 2 -->
<!-- ======================================== -->
<div
class="bg-white border border-gray-200
rounded-xl shadow-sm overflow-hidden
hover:shadow-md transition">
<div class="p-5 border-b border-gray-100">
<div class="flex items-start justify-between gap-3">
<div>
<h2 class="text-lg font-semibold text-gray-800">
Introduction to Data Science
</h2>
<p class="text-sm text-gray-500 mt-1">
Sarah Wilson
</p>
</div>
<span
class="shrink-0 inline-flex px-3 py-1
rounded-full text-xs font-medium
bg-blue-100 text-blue-700">
Enrolled
</span>
</div>
</div>
<div class="p-5 space-y-3">
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Instructor
</span>
<span class="text-sm font-medium text-gray-700">
Sarah Wilson
</span>
</div>
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Enrollment Date
</span>
<span class="text-sm font-medium text-gray-700">
28 Aug 2026
</span>
</div>
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Last Accessed
</span>
<span class="text-sm font-medium text-gray-700">
Yesterday
</span>
</div>
</div>
<div class="p-5 pt-0">
<div class="flex flex-wrap gap-2">
<button
type="button"
class="flex-1 min-w-[120px]
px-3 py-2 text-sm font-medium
bg-gray-800 text-white rounded-lg
hover:bg-gray-700 transition">
Open Course
</button>
<button
type="button"
class="px-3 py-2 text-sm font-medium
bg-blue-100 text-blue-700
rounded-lg hover:bg-blue-200 transition">
Leave Review
</button>
<!-- UNENROLL AVAILABLE FOR ENROLLED -->
<button
type="button"
class="px-3 py-2 text-sm font-medium
bg-red-100 text-red-700
rounded-lg hover:bg-red-200 transition">
Unenroll
</button>
</div>
</div>
</div>
<!-- ======================================== -->
<!-- COURSE CARD 3 -->
<!-- ======================================== -->
<div
class="bg-white border border-gray-200
rounded-xl shadow-sm overflow-hidden
hover:shadow-md transition">
<div class="p-5 border-b border-gray-100">
<div class="flex items-start justify-between gap-3">
<div>
<h2 class="text-lg font-semibold text-gray-800">
UI/UX Design Fundamentals
</h2>
<p class="text-sm text-gray-500 mt-1">
David Brown
</p>
</div>
<span
class="shrink-0 inline-flex px-3 py-1
rounded-full text-xs font-medium
bg-gray-100 text-gray-700">
Completed
</span>
</div>
</div>
<div class="p-5 space-y-3">
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Instructor
</span>
<span class="text-sm font-medium text-gray-700">
David Brown
</span>
</div>
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Enrollment Date
</span>
<span class="text-sm font-medium text-gray-700">
20 Aug 2026
</span>
</div>
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Last Accessed
</span>
<span class="text-sm font-medium text-gray-700">
2 days ago
</span>
</div>
</div>
<div class="p-5 pt-0">
<div class="flex flex-wrap gap-2">
<button
type="button"
class="flex-1 min-w-[120px]
px-3 py-2 text-sm font-medium
bg-gray-800 text-white rounded-lg
hover:bg-gray-700 transition">
Open Course
</button>
<button
type="button"
class="px-3 py-2 text-sm font-medium
bg-blue-100 text-blue-700
rounded-lg hover:bg-blue-200 transition">
Leave Review
</button>
</div>
</div>
</div>
<!-- ======================================== -->
<!-- COURSE CARD 4 -->
<!-- ======================================== -->
<div
class="bg-white border border-gray-200
rounded-xl shadow-sm overflow-hidden
hover:shadow-md transition">
<div class="p-5 border-b border-gray-100">
<div class="flex items-start justify-between gap-3">
<div>
<h2 class="text-lg font-semibold text-gray-800">
Business Fundamentals
</h2>
<p class="text-sm text-gray-500 mt-1">
Michael Lee
</p>
</div>
<span
class="shrink-0 inline-flex px-3 py-1
rounded-full text-xs font-medium
bg-red-100 text-red-700">
Dropped
</span>
</div>
</div>
<div class="p-5 space-y-3">
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Instructor
</span>
<span class="text-sm font-medium text-gray-700">
Michael Lee
</span>
</div>
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Enrollment Date
</span>
<span class="text-sm font-medium text-gray-700">
15 Aug 2026
</span>
</div>
<div class="flex justify-between gap-4">
<span class="text-sm text-gray-500">
Last Accessed
</span>
<span class="text-sm font-medium text-gray-700">
5 days ago
</span>
</div>
</div>
<div class="p-5 pt-0">
<button
type="button"
class="w-full px-3 py-2 text-sm font-medium
bg-gray-800 text-white rounded-lg
hover:bg-gray-700 transition">
Open Course
</button>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- PAGINATION -->
<!-- ========================================== -->
<div
class="flex flex-col sm:flex-row
sm:items-center sm:justify-between
gap-4 mt-6">
<!-- RECORD INFO -->
<p class="text-sm text-gray-500">
Showing 1 to 8 of 24 courses
</p>
<!-- PAGE BUTTONS -->
<div class="flex items-center gap-2">
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Previous
</button>
<button
type="button"
class="px-3 py-1.5 bg-gray-800
text-white rounded-lg text-sm">
1
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
2
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
3
</button>
<button
type="button"
class="px-3 py-1.5 border border-gray-300
rounded-lg text-sm hover:bg-gray-50">
Next
</button>
</div>
</div>
</div>
Top comments (0)