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 127

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

Trend showcase

Anonymous

1 month ago

16
Card blog
Targeta para blog

Raul antonio de la cruz hernandez

11 months ago

749
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Abdul Baset Bappy

1 year ago

1.7k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Ahita Bisma Adlula

1 year ago

4.3k
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Gidy Official

11 months ago

671
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

9 months ago

1.3k
Updated customer details page
Customer details page

Olivia Smith

2 years ago

4.3k
Dionysus AI Chat

Maxim

1 year ago

1.2k
Simple Payment Successfull Notification Page

Anonymous

1 year ago

2.5k
background animation
background animation

Jayendra Madara

2 years ago

4k
lachisa
Lachisa is a modern and innovative solution designed to simplify everyday experiences through smart technology, seamless performance, and user-friendly design. It empowers users with efficiency, reliability, and a future-ready approach.

Lokesh H

4 months ago

338