view application

This tailwind example is contributed by John, on 18-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 7

<div class="flex items-center justify-between border-b px-6 py-4">
      <div>
        <h2 class="text-xl font-semibold text-gray-800">
          View Application
        </h2>
        <p class="mt-1 text-sm text-gray-500">
          Application No: APP-2026-001
        </p>
      </div>

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

<div class="space-y-6 overflow-y-auto p-6">

<div class="flex items-center justify-between rounded-lg bg-gray-50 p-4">
        <div>
          <p class="text-sm text-gray-500">Application Status</p>
          <span class="mt-1 inline-block rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-700">
            Submitted
          </span>
        </div>

<div>
          <p class="text-sm text-gray-500">Submitted On</p>
          <p class="mt-1 font-medium text-gray-800">10 October 2026</p>
        </div>
      </div>

<section>
        <h3 class="mb-4 border-b pb-2 font-semibold text-gray-800">
          Student Information
        </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div>
            <p class="text-sm text-gray-500">Child Full Name</p>
            <p class="mt-1 font-medium text-gray-800">Aarav Sharma</p>
          </div>

<div>
            <p class="text-sm text-gray-500">Date of Birth</p>
            <p class="mt-1 font-medium text-gray-800">15 March 2020</p>
          </div>

<div>
            <p class="text-sm text-gray-500">Gender</p>
            <p class="mt-1 font-medium text-gray-800">Male</p>
          </div>

<div>
            <p class="text-sm text-gray-500">Grade Level</p>
            <p class="mt-1 font-medium text-gray-800">Grade 1</p>
          </div>

<div class="sm:col-span-2">
            <p class="text-sm text-gray-500">Birth Certificate</p>
            <p class="mt-1 font-medium text-indigo-600">
              birth-certificate.pdf
            </p>
          </div>
        </div>
      </section>

<section>
        <h3 class="mb-4 border-b pb-2 font-semibold text-gray-800">
          Parent Information
        </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div>
            <p class="text-sm text-gray-500">Parent Name</p>
            <p class="mt-1 font-medium text-gray-800">Rahul Sharma</p>
          </div>

<div>
            <p class="text-sm text-gray-500">Phone Number</p>
            <p class="mt-1 font-medium text-gray-800">9876543210</p>
          </div>

<div class="sm:col-span-2">
            <p class="text-sm text-gray-500">Email</p>
            <p class="mt-1 font-medium text-gray-800">rahul@example.com</p>
          </div>

<div class="sm:col-span-2">
            <p class="text-sm text-gray-500">Residential Address</p>
            <p class="mt-1 font-medium text-gray-800">
              25, Model Town, Ludhiana
            </p>
          </div>
        </div>
      </section>

<section>
        <h3 class="mb-4 border-b pb-2 font-semibold text-gray-800">
          Admission Details
        </h3>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div>
            <p class="text-sm text-gray-500">Academic Year</p>
            <p class="mt-1 font-medium text-gray-800">2026-2027</p>
          </div>

<div>
            <p class="text-sm text-gray-500">Class</p>
            <p class="mt-1 font-medium text-gray-800">Grade 1</p>
          </div>

<div>
            <p class="text-sm text-gray-500">Section</p>
            <p class="mt-1 font-medium text-gray-800">A</p>
          </div>

<div>
            <p class="text-sm text-gray-500">Admission Fee</p>
            <p class="mt-1 font-medium text-gray-800">₹15,000</p>
          </div>
        </div>
      </section>

</div>

<div class="flex justify-end border-t px-6 py-4">
      <button
        type="button"
        (click)="closeModal()"
        class="rounded-lg bg-gray-800 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-700">
        Close
      </button>
    </div>

</div>
</div>

<!-- {
  path: 'admin/academic-years/:id/classes',
  component: SchoolClassListComponent
}

viewClasses(id: string): void {
  this.router.navigate([
    '/admin/academic-years',
    id,
    'classes'
  ]);
}

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  const academicYearId =this.route.snapshot.paramMap.get('id');

console.log(academicYearId);
} -->

<!-- IQueryable<Clinic> query = _context.Clinics.Where(x=>!x.IsDeleted).Include(x=>x.Doctors).AsNoTracking();

// Searching 
 if (!string.IsNullOrWhiteSpace(SearchBy))
 {
     query = query.Where(i =>
         i.ClinicCode.Contains(SearchBy) ||
         i.ClinicName.Contains(SearchBy) ||
         i.City.Contains(SearchBy) ||
         i.Phone.Contains(SearchBy) ||
         i.Email.Contains(SearchBy)
     );
 }

if (!string.IsNullOrWhiteSpace(FilterByStatus))
 {
     bool isActiveFilter = string.Equals(FilterByStatus, "Active", StringComparison.OrdinalIgnoreCase);
     query = query.Where(i => i.IsActive == isActiveFilter);
 }

if (!string.IsNullOrWhiteSpace(FilterByCity))
 {
     query = query.Where(i => i.City == FilterByCity);
 }

bool isDescending = string.Equals(OrderBy, "desc", StringComparison.OrdinalIgnoreCase);

query = SortBy?.ToLower() switch
 {
     "code" => isDescending ? query.OrderByDescending(i => i.ClinicCode) : query.OrderBy(i => i.ClinicCode),
     "name" => isDescending ? query.OrderByDescending(i => i.ClinicName) : query.OrderBy(i => i.ClinicName),
     "city" => isDescending ? query.OrderByDescending(i => i.City) : query.OrderBy(i => i.City),
     "phone" => isDescending ? query.OrderByDescending(i => i.Phone) : query.OrderBy(i => i.Phone),
     "email" => isDescending ? query.OrderByDescending(i => i.Email) : query.OrderBy(i => i.Email),
     "createddate" => isDescending ? query.OrderByDescending(i => i.CreatedDate) : query.OrderBy(i => i.CreatedDate),
     _ => isDescending ? query.OrderByDescending(i => i.ClinicCode) : query.OrderBy(i => i.ClinicCode) 
 };
 var total=await query.CountAsync();
 //  Pagination
 int validPageNumber = PageNumber < 1 ? 1 : PageNumber;
 int validPageSize = PageSize < 1 ? 5 : PageSize;

query = query
     .Skip((validPageNumber - 1) * validPageSize)
     .Take(validPageSize);

var item=await  query.ToListAsync();
 return new PagedResult<Clinic>
 {
     TotalCount = total,
     Items = item,
 }; -->

Related Examples

Checkbox models
Tailwind Checkbox models

QQ-VVN

1 year ago

1.6k
ztailwindsnippet01

Anonymous

3 months ago

198
tab1
table

Anonymous

3 weeks ago

15
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.5k
ForK blocks animations
ForK blocks animations

Yor Rodriguez

1 year ago

2.4k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Abdul Baset Bappy

1 year ago

2k
GenzeStack Dumpy - Interactive Login Page with Mascot
A playful, fully responsive Tailwind CSS login component featuring "Dumpy" the GenzeStack mascot with interactive status tabs, custom SVG graphics, and dark mode support.

Sayista Yazdani

1 week ago

129
hover grid card
hover over card to change images and contents.

Olajide Olamide (Laemmy)

5 months ago

494
apply

John

2 hours ago

2
Cloudscape 404 Error Page
A unique responsive 404 page built with pure HTML and Tailwind CSS .

JUGENDRA GANGWAR

2 weeks ago

26
Simple count down timer

Gopi Yadav

3 years ago

15.6k
Concert ticket

Elijah Davis

3 years ago

14.1k