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 36 1

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

The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

489
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

10 months ago

974
joker
joker cyber punk

Baraka Salvator

1 year ago

2.1k
chatbot
is my chatbot

Omer fils ELENGA

1 year ago

1.3k
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
Google map iframe with tailwind

Kofi Osei

3 years ago

22.5k
Sign up
sign up page

gidy

1 year ago

2.2k
Forgot password?
you can change password an time

gidy

1 year ago

1.1k
Fancy underline

Simon Scheffer

3 years ago

13.3k
register
this is register form

aditya_sharma

3 months ago

518
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

SANJAY SINGH GARIYA

1 year ago

2.3k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

3k