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 3

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

Checkbox models
Tailwind Checkbox models

QQ-VVN

1 year ago

1.6k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.2k
Forgot Password Screen

JUGENDRA GANGWAR

3 weeks ago

42
Health Tracker - Diet Calorie Management App
Health Tracker - Diet Calorie Management App

Tanvir Hasan Bappy (Tanvir)

9 months ago

611
about video
about kelaplus video

Omer fils ELENGA

1 year ago

1.3k
Two-Factor Authentication

JUGENDRA GANGWAR

3 weeks ago

23
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

KULDEEP

1 year ago

1.5k
Share button

Maxim

1 year ago

2.1k
Status Flow

Anonymous

1 month ago

71
Image - Figure with figcaption design

Maxim

1 year ago

1.4k