apply

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 8

Fork Fullscreen

//admission form
@if (showAdmissionModal && selectedClass) {
  <div
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
    (click)="closeAdmissionForm()"
  >
    <div
      class="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-2xl bg-white shadow-xl"
      (click)="$event.stopPropagation()"
    >
      <div class="sticky top-0 flex items-center justify-between border-b bg-white px-6 py-4">
        <div>
          <h2 class="text-xl font-bold text-gray-800">Admission Application</h2>
          <p class="text-sm text-gray-500">Enter the child's details</p>
        </div>

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

<form
        class="space-y-5 p-6"
        (submit)="$event.preventDefault(); submitAdmissionForm()"
      >
        
        <div class="rounded-xl bg-blue-50 p-4">
          <h3 class="mb-3 font-semibold text-blue-800">Selected Class</h3>

<div class="grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
            <div>
              <p class="text-gray-500">Class Code</p>
              <p class="font-semibold">{{ selectedClass.classCode }}</p>
            </div>

<div>
              <p class="text-gray-500">Academic Year</p>
              <p class="font-semibold">{{ selectedClass.yearLabel }}</p>
            </div>

<div>
              <p class="text-gray-500">Grade / Section</p>
              <p class="font-semibold">
                {{ selectedClass.gradeLevel }} - {{ selectedClass.section }}
              </p>
            </div>
          </div>
        </div>

<div>
          <label class="mb-1 block text-sm font-medium text-gray-700">
            Child Full Name *
          </label>
          <input
            type="text"
            name="childFullName"
            required
            maxlength="100"
            pattern="[A-Za-z ]+"
            title="Use alphabets and spaces only."
            placeholder="Enter child's full name"
            class="w-full rounded-lg border border-gray-300 px-3 py-2.5 outline-none focus:border-blue-500"
            [value]="admissionForm.childFullName"
            (input)="admissionForm.childFullName = $any($event.target).value"
          />
        </div>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div>
            <label class="mb-1 block text-sm font-medium text-gray-700">
              Child Date of Birth *
            </label>
            <input
              type="date"
              name="childDateOfBirth"
              required
              [max]=""
              class="w-full rounded-lg border border-gray-300 px-3 py-2.5 outline-none focus:border-blue-500"
              [value]="admissionForm.childDateOfBirth"
              (change)="admissionForm.childDateOfBirth = $any($event.target).value"
            />
            <p class="mt-1 text-xs text-gray-500">
              Age eligibility will be validated against the selected grade.
            </p>
          </div>

<div>
            <label class="mb-1 block text-sm font-medium text-gray-700">
              Child Gender *
            </label>
            <select
              name="childGender"
              required
              class="w-full rounded-lg border border-gray-300 px-3 py-2.5 outline-none focus:border-blue-500"
              [value]="admissionForm.childGender"
              (change)="admissionForm.childGender = $any($event.target).value"
            >
              <option value="">Select gender</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
              <option value="Other">Other</option>
            </select>
          </div>
        </div>

<div>
          <label class="mb-1 block text-sm font-medium text-gray-700">
            Previous School Name
          </label>
          <input
            type="text"
            name="previousSchoolName"
            maxlength="150"
            placeholder="Enter previous school (optional)"
            class="w-full rounded-lg border border-gray-300 px-3 py-2.5 outline-none focus:border-blue-500"
            [value]="admissionForm.previousSchoolName"
            (input)="admissionForm.previousSchoolName = $any($event.target).value"
          />
        </div>

<div class="rounded-lg border border-gray-200 p-4">
          <label class="flex cursor-pointer items-center gap-3">
            <input
              type="checkbox"
              name="transportRequired"
              class="h-4 w-4 accent-blue-600"
              [checked]="admissionForm.transportRequired"
              (change)="admissionForm.transportRequired = $any($event.target).checked"
            />
            <span class="text-sm font-medium text-gray-700">
              Transport Required
            </span>
          </label>
        </div>

<div>
          <label class="mb-1 block text-sm font-medium text-gray-700">
            Birth Certificate Upload *
          </label>
          <input
            type="file"
            name="birthCertificate"
            required
            accept=".pdf,.jpg,.jpeg,application/pdf,image/jpeg"
            class="block w-full rounded-lg border border-gray-300 text-sm file:mr-4 file:border-0 file:bg-gray-100 file:px-4 file:py-2.5 file:font-medium"
            (change)="onBirthCertificateSelected($event)"
          />
          <p class="mt-1 text-xs text-gray-500">
            Accepted formats: PDF, JPG. Maximum size: 5 MB.
          </p>

@if (birthCertificate) {
            <p class="mt-2 text-sm text-green-700">
              Selected: {{ birthCertificate.name }}
            </p>
          }

@if (birthCertificateError) {
            <p class="mt-2 text-sm text-red-600">
              {{ birthCertificateError }}
            </p>
          }
        </div>

<div class="rounded-lg border border-gray-200 p-4">
          <label class="flex cursor-pointer items-start gap-3">
            <input
              type="checkbox"
              name="declarationAccepted"
              required
              class="mt-1 h-4 w-4 accent-blue-600"
              [checked]="admissionForm.declarationAccepted"
              (change)="admissionForm.declarationAccepted = $any($event.target).checked"
            />
            <span class="text-sm text-gray-700">
              I declare that the information provided in this application
              and the uploaded document are true and correct. *
            </span>
          </label>
        </div>

<div class="flex justify-end gap-3 border-t pt-4">
          <button
            type="button"
            class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100"
            (click)="closeAdmissionForm()"
          >
            Cancel
          </button>

<button
            type="submit"
            class="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-blue-700"
          >
            Submit Application
          </button>
        </div>
      </form>
    </div>
  </div>
}

//view my application
@if (showPaymentModal && selectedPaymentApplication) {
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
      <h2 class="text-xl font-bold text-gray-800">
        Admission Fee Payment
      </h2>

<div class="mt-5 space-y-4 rounded-lg bg-gray-50 p-4">
        <div class="flex justify-between">
          <span class="text-gray-500">Application ID</span>
          <span class="font-medium">{{ selectedPaymentApplication.id }}</span>
        </div>

<div class="flex justify-between">
          <span class="text-gray-500">Child Name</span>
          <span class="font-medium">{{ selectedPaymentApplication.childName }}</span>
        </div>

<div class="flex justify-between">
          <span class="text-gray-500">Admission Fee</span>
          <span class="font-bold text-blue-700">
            ₹{{ selectedPaymentApplication.feeAmount }}
          </span>
        </div>

<div class="flex justify-between">
          <span class="text-gray-500">Due Date</span>
          <span class="font-medium">
            {{ selectedPaymentApplication.feeDueDate
              ? (selectedPaymentApplication.feeDueDate | date:'dd MMM yyyy')
              : 'N/A' }}
          </span>
        </div>
      </div>

<div class="mt-6 flex justify-end gap-3">
        <button
          type="button"
          class="rounded-lg border border-gray-300 px-4 py-2 text-sm"
          (click)="closePaymentModal()"
        >
          Cancel
        </button>

<button
          type="button"
          class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
          (click)="payAdmissionFee()"
        >
          Pay Now
        </button>
      </div>
    </div>
  </div>
}

--view my application
@if (showDetailsModal && selectedApplication) {
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-2xl rounded-xl bg-white p-6 shadow-xl">

<div class="flex items-center justify-between">
        <h2 class="text-xl font-bold text-gray-800">
          Application Details
        </h2>

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

<div>
          <p class="text-sm text-gray-500">Application ID</p>
          <p class="font-medium">{{ selectedApplication.id || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Child Name</p>
          <p class="font-medium">{{ selectedApplication.childName || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Grade Level</p>
          <p class="font-medium">{{ selectedApplication.gradeLevel || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Section</p>
          <p class="font-medium">{{ selectedApplication.section || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Submitted Date</p>
          <p class="font-medium">
            {{ selectedApplication.submittedDate
              ? (selectedApplication.submittedDate | date:'dd MMM yyyy')
              : 'N/A' }}
          </p>
        </div>

<div>
          <p class="text-sm text-gray-500">Application Status</p>
          <p class="font-medium">{{ selectedApplication.status || 'N/A' }}</p>
        </div>

<div>
          <p class="text-sm text-gray-500">Admission Fee</p>
          <p class="font-medium">
            {{ selectedApplication.feeAmount != null
              ? ('₹' + selectedApplication.feeAmount)
              : 'N/A' }}
          </p>
        </div>

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

</div>

<div class="mt-6 flex justify-end">
        <button
          type="button"
          class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700"
          (click)="closeDetailsModal()">
          Close
        </button>
      </div>

</div>
  </div>
}

Related Examples

google clone page
This HTML page includes: The Google logo with the correct colors A search input field with microphone and camera icons "Google Search" and "Win Freeing Lucky" buttons The text "With new The ZGS Breakthrough Plus cabinets today's where business ?" Footer with all the links shown in the image: Advertising, Business, New Search works, Privacy, Terms, Settings The climate action text in the footer The layout is responsive and uses Tailwind CSS for styling. The colors match Google's brand colors, and the overall structure matches what's shown in the image.

Bishnu Thapa

1 year ago

1.6k
register

Anonymous

1 day ago

5
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Ramkesh Gupta

1 year ago

1k
Privacy Policy
Privacy Policy

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.1k
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
status indicatior
status indicator navigation dashbord

Rushikesh Latpate

1 year ago

1.6k
dsdd
dsdsd

fem dev

6 months ago

382
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
tab6
table

Anonymous

3 weeks ago

97
Half filled circle with tailwind

Alok

3 years ago

14.3k
Card KPI
Targetas

Raul antonio de la cruz hernandez

11 months ago

1k
default images playground
an images gallery

mingderwang

4 months ago

113