new form

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

Other

Author Anonymous

Tailwind v3.4 25

Fork Fullscreen

<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
      Admin Dashboard
    </h1>
    <p class="mt-1 text-sm text-gray-500">
      School Admission & Fee Management System
    </p>
  </div>

<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">

<div class="rounded-lg border bg-white p-5 shadow-sm">
      <p class="text-sm text-gray-500">Total Applications</p>
      <h2 class="mt-2 text-3xl font-bold text-gray-800">100</h2>
    </div>

<div class="rounded-lg border bg-white p-5 shadow-sm">
      <p class="text-sm text-gray-500">Waitlist Count</p>
      <h2 class="mt-2 text-3xl font-bold text-gray-800">12</h2>
    </div>

<div class="rounded-lg border bg-white p-5 shadow-sm">
      <p class="text-sm text-gray-500">Admission Conversion Rate</p>
      <h2 class="mt-2 text-3xl font-bold text-gray-800">35%</h2>
    </div>

</div>

<div class="mt-6 rounded-lg border bg-white p-5 shadow-sm">

<h2 class="mb-4 text-lg font-semibold text-gray-800">
      Seats Filled per Class
    </h2>

<div class="mb-4">
      <p class="text-sm text-gray-500">Academic Year</p>
      <p class="font-medium text-gray-800">2026–2027</p>
    </div>

<thead class="bg-gray-100 text-gray-600">
          <tr>
            <th class="px-4 py-3">Class</th>
            <th class="px-4 py-3">Total Seats</th>
            <th class="px-4 py-3">Seats Filled</th>
            <th class="px-4 py-3">Seats Remaining</th>
          </tr>
        </thead>

<tbody class="divide-y divide-gray-200 text-gray-700">
          <tr>
            <td class="px-4 py-3">Nursery</td>
            <td class="px-4 py-3">40</td>
            <td class="px-4 py-3">30</td>
            <td class="px-4 py-3">10</td>
          </tr>

<tr>
            <td class="px-4 py-3">Grade 1</td>
            <td class="px-4 py-3">40</td>
            <td class="px-4 py-3">20</td>
            <td class="px-4 py-3">20</td>
          </tr>

<tr>
            <td class="px-4 py-3">Grade 2</td>
            <td class="px-4 py-3">40</td>
            <td class="px-4 py-3">10</td>
            <td class="px-4 py-3">30</td>
          </tr>
        </tbody>

</table>
    </div>

</div>

<!-- public interface IDashboardService
{
    Task<object> GetDashboardAsync();
}

using Microsoft.EntityFrameworkCore;

public class DashboardService : IDashboardService
{
    private readonly ApplicationDbContext _context;

public DashboardService(ApplicationDbContext context)
    {
        _context = context;
    }

public async Task<object> GetDashboardAsync()
    {
        var totalApplications = await _context.AdmissionApplications
            .CountAsync();

var waitlistCount = await _context.AdmissionApplications
            .CountAsync(x => x.Status == ApplicationStatus.Waitlisted);

var confirmedCount = await _context.AdmissionApplications
            .CountAsync(x => x.Status == ApplicationStatus.Confirmed);

var conversionRate = totalApplications == 0
            ? 0
            : Math.Round((double)confirmedCount / totalApplications * 100, 2);

var seatsFilledPerClass = await _context.SchoolClasses
            .Select(x => new
            {
                ClassName = x.GradeLevel.Name,
                TotalSeats = x.TotalSeats,

SeatsFilled = x.Applications.Count(a =>
                    a.Status == ApplicationStatus.Confirmed),

SeatsRemaining = x.TotalSeats -
                    x.Applications.Count(a =>
                        a.Status == ApplicationStatus.Confirmed)
            })
            .ToListAsync();

return new
        {
            TotalApplications = totalApplications,
            WaitlistCount = waitlistCount,
            AdmissionConversionRate = conversionRate,
            SeatsFilledPerClass = seatsFilledPerClass
        };
    }
}

public class DashboardResponse
{
    public int TotalApplications { get; set; }
    public int WaitlistCount { get; set; }
    public double AdmissionConversionRate { get; set; }

public List<ClassSeatResponse> SeatsFilledPerClass { get; set; } = new();
}

public class ClassSeatResponse
{
    public string ClassName { get; set; } = string.Empty;
    public int TotalSeats { get; set; }
    public int SeatsFilled { get; set; }
    public int SeatsRemaining { get; set; }
} -->

Related Examples

Tailwind Google Map widget

Dung Vuong

1 year ago

1.1k
Font testing
comparing old fonts to tailwind with clamp sizing

Sherry Lynne

3 months ago

389
Icon group

Conan Hilton

3 years ago

10.4k
Invoice template

Shakti

3 years ago

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

JUGENDRA GANGWAR

1 month ago

63
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k
pricing
pricing

Omer fils ELENGA

1 year ago

1.1k
Tailwind invoice example

Elijah Davis

3 years ago

19.8k
Glassmorphism form

Sophia Baker

3 years ago

19.5k
Indented Media Panels

Sherry Lynne

2 months ago

184
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
cards
cards with background animation

Anonymous

3 years ago

12.6k