View 1

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

Other

Author Anonymous

Tailwind v3.4 5

Fork Fullscreen

--view year
@if (isModalOpen) {
  <div
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
    (click)="onClose()"
  >
    <div
      class="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-xl bg-white shadow-xl"
      (click)="$event.stopPropagation()"
    >
      <div class="flex items-center justify-between border-b px-6 py-4">
        <h2 class="text-xl font-semibold text-gray-800">
          Academic Year Details
        </h2>

<button
          type="button"
          (click)="onClose()"
          class="text-2xl text-gray-500 hover:text-gray-800"
        >
          &times;
        </button>
      </div>

<div class="space-y-6 p-6">
        @if (isLoading) {
          <p class="text-center text-gray-500">Loading details...</p>
        } @else if (errorMessage) {
          <p class="text-red-600">{{ errorMessage }}</p>
        } @else if (academicYear) {

<section>
            <h3 class="mb-3 font-semibold text-gray-700">
              Basic Information
            </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <div>
                <p class="text-sm text-gray-500">Academic Year Code</p>
                <p class="font-medium">{{ academicYear.academicYearCode }}</p>
              </div>

<div>
                <p class="text-sm text-gray-500">Year Label</p>
                <p class="font-medium">{{ academicYear.yearLabel }}</p>
              </div>

<div>
                <p class="text-sm text-gray-500">Status</p>
                <span class="inline-block rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-700">
                  {{ academicYear.status }}
                </span>
              </div>
            </div>
          </section>

<hr />

<section>
            <h3 class="mb-3 font-semibold text-gray-700">
              Academic Period
            </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div>
                <p class="text-sm text-gray-500">Start Date</p>
                <p class="font-medium">
                  {{ academicYear.startDate | date:'dd MMM yyyy' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">End Date</p>
                <p class="font-medium">
                  {{ academicYear.endDate | date:'dd MMM yyyy' }}
                </p>
              </div>
            </div>
          </section>

<hr />

<section>
            <h3 class="mb-3 font-semibold text-gray-700">
              Admission Window
            </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div>
                <p class="text-sm text-gray-500">Opening Date</p>
                <p class="font-medium">
                  {{ academicYear.admissionWindowOpenDate | date:'dd MMM yyyy' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Closing Date</p>
                <p class="font-medium">
                  {{ academicYear.admissionWindowCloseDate | date:'dd MMM yyyy' }}
                </p>
              </div>
            </div>
          </section>

<hr />

<section>
            <h3 class="mb-3 font-semibold text-gray-700">
              Audit Information
            </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div>
                <p class="text-sm text-gray-500">Created At</p>
                <p class="font-medium">
                  {{ academicYear.createdAt ? (academicYear.createdAt | date:'dd MMM yyyy, h:mm a') : 'N/A' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Created By</p>
                <p class="font-medium">
                  {{ academicYear.createdBy || 'N/A' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Updated At</p>
                <p class="font-medium">
                  {{ academicYear.updatedAt ? (academicYear.updatedAt | date:'dd MMM yyyy, h:mm a') : 'N/A' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Updated By</p>
                <p class="font-medium">
                  {{ academicYear.updatedBy || 'N/A' }}
                </p>
              </div>
            </div>
          </section>

<hr />

<section>
            <h3 class="mb-3 font-semibold text-gray-700">
              Admission Statistics
            </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div class="rounded-lg bg-gray-50 p-4">
                <p class="text-sm text-gray-500">Total Applications</p>
                <p class="mt-1 text-2xl font-semibold">
                  {{ academicYear.totalApplications ?? 'N/A' }}
                </p>
              </div>

<div class="rounded-lg bg-gray-50 p-4">
                <p class="text-sm text-gray-500">Submitted Applications</p>
                <p class="mt-1 text-2xl font-semibold">
                  {{ academicYear.submittedApplications ?? 'N/A' }}
                </p>
              </div>
            </div>
          </section>
        }
      </div>

<div class="flex justify-end border-t px-6 py-4">
        <button
          type="button"
          (click)="onClose()"
          class="rounded-md bg-gray-600 px-5 py-2 text-white hover:bg-gray-700"
        >
          Close
        </button>
      </div>
    </div>
  </div>
}

--view school classs

@if (isModalOpen) {
  <div
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
    (click)="onClose()"
  >
    <div
      class="max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-xl bg-white shadow-xl"
      (click)="$event.stopPropagation()"
    >
      <div class="flex items-center justify-between border-b px-6 py-4">
        <h2 class="text-xl font-semibold text-gray-800">
          School Class Details
        </h2>

<button
          type="button"
          (click)="onClose()"
          class="text-2xl text-gray-500 hover:text-gray-800"
        >
          &times;
        </button>
      </div>

<div class="space-y-6 p-6">
        @if (isLoading) {
          <p class="text-center text-gray-500">Loading class details...</p>
        } @else if (errorMessage) {
          <p class="text-red-600">{{ errorMessage }}</p>
        } @else if (schoolClass) {

<section>
            <h3 class="mb-3 font-semibold text-gray-700">
              Basic Information
            </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <div>
                <p class="text-sm text-gray-500">Class Code</p>
                <p class="font-medium">{{ schoolClass.classCode }}</p>
              </div>

<div>
                <p class="text-sm text-gray-500">Academic Year</p>
                <p class="font-medium">
                  {{ schoolClass.yearLabel || schoolClass.academicYear?.yearLabel || schoolClass.academicYearId }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Grade Level</p>
                <p class="font-medium">
                  {{ schoolClass.gradeLevelName || schoolClass.gradeLevel?.name || schoolClass.gradeLevelId }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Section</p>
                <p class="font-medium">{{ schoolClass.section }}</p>
              </div>

<div>
                <p class="text-sm text-gray-500">Status</p>
                <span
                  class="inline-block rounded-full px-3 py-1 text-sm"
                  [class.bg-green-100]="schoolClass.status === 'Active'"
                  [class.text-green-700]="schoolClass.status === 'Active'"
                  [class.bg-gray-100]="schoolClass.status === 'Inactive'"
                  [class.text-gray-700]="schoolClass.status === 'Inactive'"
                >
                  {{ schoolClass.status }}
                </span>
              </div>
            </div>
          </section>

<hr />

<section>
            <h3 class="mb-3 font-semibold text-gray-700">
              Capacity Information
            </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <div>
                <p class="text-sm text-gray-500">Seats Available</p>
                <p class="font-medium">{{ schoolClass.seatsAvailable }}</p>
              </div>

<div>
                <p class="text-sm text-gray-500">Confirmed Admissions</p>
                <p class="font-medium">
                  {{ schoolClass.confirmedAdmissions ?? 'N/A' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Remaining Seats</p>
                <p class="font-medium">
                  {{ schoolClass.remainingSeats ?? 'N/A' }}
                </p>
              </div>
            </div>
          </section>

<hr />

<section>
            <h3 class="mb-3 font-semibold text-gray-700">
              Fee Information
            </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div>
                <p class="text-sm text-gray-500">Admission Fee</p>
                <p class="font-medium">
                  {{ schoolClass.admissionFee | currency:'INR':'symbol':'1.2-2' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Monthly Tuition Fee</p>
                <p class="font-medium">
                  {{ schoolClass.monthlyTuitionFee | currency:'INR':'symbol':'1.2-2' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Monthly Transport Fee</p>
                <p class="font-medium">
                  {{ schoolClass.transportFeeMonthly == null
                    ? 'Not applicable'
                    : (schoolClass.transportFeeMonthly | currency:'INR':'symbol':'1.2-2') }}
                </p>
              </div>
            </div>
          </section>

<hr />

<section>
            <h3 class="mb-3 font-semibold text-gray-700">
              Audit Information
            </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div>
                <p class="text-sm text-gray-500">Created At</p>
                <p class="font-medium">
                  {{ schoolClass.createdAt
                    ? (schoolClass.createdAt | date:'dd MMM yyyy, h:mm a')
                    : 'N/A' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Created By</p>
                <p class="font-medium">
                  {{ schoolClass.createdBy || 'N/A' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Updated At</p>
                <p class="font-medium">
                  {{ schoolClass.updatedAt
                    ? (schoolClass.updatedAt | date:'dd MMM yyyy, h:mm a')
                    : 'N/A' }}
                </p>
              </div>

<div>
                <p class="text-sm text-gray-500">Updated By</p>
                <p class="font-medium">
                  {{ schoolClass.updatedBy || 'N/A' }}
                </p>
              </div>
            </div>
          </section>
        }
      </div>

Related Examples

Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.7k
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
Organization Hierarchy list

Anonymous

3 years ago

9.8k
DSI Studio
...

DSI Studio

1 month ago

10
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Abdul Baset Bappy

1 year ago

1.9k
MULTI-STEP FORM component
MULTI-STEP FORM WIZARD · Open Source Component Steps: Personal → Role → Preferences → Goals → Review Features: stepper, validation, conditional fields, localStorage, animated transitions, review summary

Ijila Itunu

6 months ago

479
Terms of Service Page Template

Anonymous

1 year ago

3.1k
admindashboard
creates a responsive, interactive admin dashboard using Tailwind CSS, Font Awesome, Chart.js, and custom JavaScript animations. It's called "Materially Dashboard" and is designed for presenting key statistics and analytics data in a visually appealing manner.

ishimwe shadad

1 year ago

1.4k
Made a sinup form
Made a sinnup form #sufyandev

Sufyan jutt

9 months ago

508
Image Gallery with Alpine.Js

Maxim

1 year ago

1.7k
Payment success page example

Anonymous

1 year ago

2.3k