dashboard

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

Other

Author Anonymous

Tailwind v3.4 4

Fork Fullscreen

<div class="p-6">
  <div class="mb-6">
    <h2 class="text-2xl font-bold text-gray-800">Browse Open Classes</h2>
    <p class="mt-1 text-sm text-gray-500">
      Find available classes and apply for admission.
    </p>
  </div>

<div class="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
    <input
      type="text"
      placeholder="Search class..."
      class="rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
      [value]="searchTerm"
      (input)="searchTerm = $any($event.target).value; resetPage()"
    />

<select
      class="rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
      [value]="gradeFilter"
      (change)="gradeFilter = $any($event.target).value; resetPage()"
    >
      <option value="">All Grades</option>
      <option value="Nursery">Nursery</option>
      <option value="LKG">LKG</option>
      <option value="UKG">UKG</option>
      <option value="Grade 1">Grade 1</option>
      <option value="Grade 2">Grade 2</option>
    </select>

<select
      class="rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
      [value]="transportFilter"
      (change)="transportFilter = $any($event.target).value; resetPage()"
    >
      <option value="">All Transport</option>
      <option value="available">Available</option>
      <option value="unavailable">Not Available</option>
    </select>
  </div>

<div class="overflow-x-auto rounded-xl border border-gray-200 bg-white shadow-sm">
    <table class="w-full min-w-[1100px] text-left text-sm">
      <thead class="bg-gray-100 text-xs uppercase tracking-wide text-gray-600">
     
<tr>
  <th (click)="sort('classCode')" class="cursor-pointer px-4 py-4 hover:bg-gray-200">
    Class Code {{ sortBy === 'classCode' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}
  </th>

<th (click)="sort('yearLabel')" class="cursor-pointer px-4 py-4 hover:bg-gray-200">
    Academic Year {{ sortBy === 'yearLabel' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}
  </th>

<th (click)="sort('gradeLevel')" class="cursor-pointer px-4 py-4 hover:bg-gray-200">
    Grade {{ sortBy === 'gradeLevel' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}
  </th>

<th (click)="sort('section')" class="cursor-pointer px-4 py-4 hover:bg-gray-200">
    Section {{ sortBy === 'section' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}
  </th>

<th (click)="sort('totalSeats')" class="cursor-pointer px-4 py-4 hover:bg-gray-200">
    Total Seats {{ sortBy === 'totalSeats' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}
  </th>

<th (click)="sort('confirmedAdmissions')" class="cursor-pointer px-4 py-4 hover:bg-gray-200">
    Confirmed Admissions {{ sortBy === 'confirmedAdmissions' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}
  </th>

<th (click)="sort('admissionFee')" class="cursor-pointer px-4 py-4 hover:bg-gray-200">
    Admission Fee {{ sortBy === 'admissionFee' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}
  </th>

<th (click)="sort('monthlyTuitionFee')" class="cursor-pointer px-4 py-4 hover:bg-gray-200">
    Monthly Tuition {{ sortBy === 'monthlyTuitionFee' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}
  </th>

<th (click)="sort('transportFee')" class="cursor-pointer px-4 py-4 hover:bg-gray-200">
    Transport Fee {{ sortBy === 'transportFee' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}
  </th>

<th class="px-4 py-4">Action</th>
</tr>

</thead>

<tbody class="divide-y divide-gray-100">
        @for (item of paginatedClasses; track item.id) {
          <tr class="transition hover:bg-blue-50">
            <td class="whitespace-nowrap px-4 py-4 font-medium text-gray-800">
              {{ item.classCode }}
            </td>

<td class="whitespace-nowrap px-4 py-4 text-gray-600">
              {{ item.yearLabel }}
            </td>

<td class="whitespace-nowrap px-4 py-4 font-medium text-gray-800">
              {{ item.gradeLevel }}
            </td>

<td class="px-4 py-4 text-gray-600">{{ item.section }}</td>

<td class="px-4 py-4">
              <span class="rounded-full bg-green-100 px-2.5 py-1 text-xs font-semibold text-green-700">
                {{ item.totalSeats - item.confirmedAdmissions }}
              </span>
            </td>

<td class="whitespace-nowrap px-4 py-4 text-gray-700">
              ₹{{ item.admissionFee }}
            </td>

<td class="whitespace-nowrap px-4 py-4 text-gray-700">
              ₹{{ item.monthlyTuitionFee }}
            </td>

<td class="whitespace-nowrap px-4 py-4 text-gray-600">
              {{ item.transportFee > 0 ? '₹' + item.transportFee : 'Unavailable' }}
            </td>

<td class="whitespace-nowrap px-4 py-4">
              <button
                type="button"
                class="rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white transition hover:bg-blue-700"
                (click)="applyForAdmission(item)"
              >
                Apply
              </button>
            </td>
          </tr>
        } @empty {
          <tr>
            <td colspan="9" class="px-4 py-10 text-center text-gray-500">
              No open classes found.
            </td>
          </tr>
        }
      </tbody>
    </table>
  </div>

<div class="mt-4 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
    <div class="flex items-center gap-3 text-sm text-gray-600">
      <span>Total: {{ filteredClasses.length }} classes</span>

<div class="flex items-center gap-2">
      <button
        type="button"
        class="rounded-lg border border-gray-300 px-3 py-2 text-sm hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
        [disabled]="currentPage <= 1"
        (click)="changePage(currentPage - 1)"
      >
        Previous
      </button>

<span class="px-2 text-sm text-gray-600">
        {{ currentPage }} / {{ totalPages || 1 }}
      </span>

<button
        type="button"
        class="rounded-lg border border-gray-300 px-3 py-2 text-sm hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
        [disabled]="currentPage >= totalPages"
        (click)="changePage(currentPage + 1)"
      >
        Next
      </button>
    </div>
  </div>
</div>

//application card

<div class="p-6">
  <div class="mb-6">
    <h2 class="text-2xl font-bold text-gray-800">My Applications</h2>
    <p class="mt-1 text-sm text-gray-500">
      Track your admission applications and their status.
    </p>
  </div>

<div class="mb-6 flex flex-col gap-3 sm:flex-row">
    <input
      type="text"
      placeholder="Search child name, application ID or grade..."
      class="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm outline-none focus:border-blue-500 sm:max-w-md"
      [value]="searchTerm"
      (input)="searchTerm = $any($event.target).value; resetPage()"
    />

<select
      class="rounded-lg border border-gray-300 px-4 py-2.5 text-sm outline-none focus:border-blue-500"
      [value]="selectedStatus"
      (change)="selectedStatus = $any($event.target).value; resetPage()"
    >
      <option value="">All Statuses</option>
      <option value="Submitted">Submitted</option>
      <option value="UnderReview">Under Review</option>
      <option value="Shortlisted">Shortlisted</option>
      <option value="InterviewScheduled">Interview Scheduled</option>
      <option value="Confirmed">Confirmed</option>
      <option value="Rejected">Rejected</option>
      <option value="Waitlisted">Waitlisted</option>
      <option value="Withdrawn">Withdrawn</option>
    </select>
  </div>

<div class="grid grid-cols-1 gap-5 xl:grid-cols-2">
    @for (app of paginatedApplications; track app.id) {
      <div class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm transition hover:shadow-md">

<div class="flex items-start justify-between gap-3 border-b border-gray-100 pb-4">
          <div>
            <p class="text-xs font-medium uppercase tracking-wide text-gray-500">
              Application ID
            </p>
            <h3 class="mt-1 text-lg font-bold text-gray-800">
              {{ app.id }}
            </h3>
          </div>

<span
            class="rounded-full px-3 py-1.5 text-xs font-semibold"
            [ngClass]="getStatusClass(app.status)"
          >
            {{ app.status === 'UnderReview' ? 'Under Review' :
               app.status === 'InterviewScheduled' ? 'Interview Scheduled' :
               app.status }}
          </span>
        </div>

<div class="grid grid-cols-2 gap-4 py-5">
          <div>
            <p class="text-xs text-gray-500">Child Name</p>
            <p class="mt-1 font-semibold text-gray-800">{{ app.childName }}</p>
          </div>

<div>
            <p class="text-xs text-gray-500">Grade Level</p>
            <p class="mt-1 font-semibold text-gray-800">{{ app.gradeLevel }}</p>
          </div>

<div>
            <p class="text-xs text-gray-500">Section</p>
            <p class="mt-1 font-medium text-gray-800">{{ app.section }}</p>
          </div>

<div>
            <p class="text-xs text-gray-500">Submitted Date</p>
            <p class="mt-1 font-medium text-gray-800">
              {{ app.submittedDate | date:'dd MMM yyyy' }}
            </p>
          </div>
        </div>

<div class="rounded-lg bg-gray-50 p-4">
          <div class="flex items-center justify-between gap-3">
            <div>
              <p class="text-xs text-gray-500">Admission Fee</p>
              <p class="mt-1 text-lg font-bold text-gray-800">
                ₹{{ app.feeAmount }}
              </p>
            </div>

<div class="text-right">
              <p class="text-xs text-gray-500">Fee Due Date</p>
              <p class="mt-1 text-sm font-medium text-gray-800">
                {{ app.feeDueDate ? (app.feeDueDate | date:'dd MMM yyyy') : 'N/A' }}
              </p>
            </div>
          </div>
        </div>

<div class="mt-5 flex flex-wrap gap-2">
          <button
            type="button"
            class="rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
            (click)="viewDetails(app)"
          >
            View Details
          </button>

@if (app.status === 'InterviewScheduled') {
            <button
              type="button"
              class="rounded-lg border border-purple-200 bg-purple-50 px-3 py-2 text-sm font-medium text-purple-700 hover:bg-purple-100"
              (click)="viewInterview(app)"
            >
              View Interview Slot
            </button>
          }

@if (app.status === 'Confirmed') {
            <button
              type="button"
              class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700"
              (click)="payFee(app)"
            >
              Pay Admission Fee
            </button>
          }

@if (app.status === 'Submitted' ||
               app.status === 'UnderReview' ||
               app.status === 'Waitlisted') {
            <button
              type="button"
              class="rounded-lg border border-red-200 px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50"
              (click)="withdrawApplication(app)"
            >
              Withdraw
            </button>
          }
        </div>
      </div>
    } @empty {
      <div class="col-span-full rounded-xl border border-dashed border-gray-300 p-10 text-center">
        <h3 class="font-semibold text-gray-700">No applications found</h3>
        <p class="mt-1 text-sm text-gray-500">
          Try changing your search or status filter.
        </p>
      </div>
    }
  </div>

<div class="mt-6 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
    <p class="text-sm text-gray-500">
      Total applications: {{ filteredApplications.length }}
    </p>

<div class="flex items-center gap-2">
      <button
        type="button"
        class="rounded-lg border border-gray-300 px-3 py-2 text-sm hover:bg-gray-100 disabled:opacity-40"
        [disabled]="currentPage <= 1"
        (click)="changePage(currentPage - 1)"
      >
        Previous
      </button>

<span class="px-2 text-sm text-gray-600">
        Page {{ currentPage }} of {{ totalPages || 1 }}
      </span>

<button
        type="button"
        class="rounded-lg border border-gray-300 px-3 py-2 text-sm hover:bg-gray-100 disabled:opacity-40"
        [disabled]="currentPage >= totalPages"
        (click)="changePage(currentPage + 1)"
      >
        Next
      </button>
    </div>
  </div>
</div>

Related Examples

Made a sinup form
Made a sinnup form #sufyandev

Sufyan jutt

8 months ago

448
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
htmlcss1

Anonymous

1 year ago

889
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Anum Shahana

1 year ago

2.3k
Card post blog
Targetas para blog

Raul antonio de la cruz hernandez

11 months ago

708
Chat Interface Skeleton
Messaging interface skeleton built with Tailwind CSS.

JUGENDRA GANGWAR

5 days ago

11
Contact us Form with Responsive

KULDEEP

1 year ago

1.2k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

2.5k
Order History
Order History

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
NOTIFICATION
This code can serve as a boiler-plate for a notification for an application

NUNNA VIJAYA KRISHNA

8 months ago

1.1k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

KULDEEP

1 year ago

1.8k
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