Register Form

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

Tailwind v3.4 4

<div class="max-w-lg mx-auto  bg-white dark:bg-gray-800 rounded-lg shadow-md px-8 py-10 flex flex-col items-center">
    <h1 class="text-xl font-bold text-center text-gray-700 dark:text-gray-200 mb-8">Welcome to My Company</h1>
    <form action="#" class="w-full flex flex-col gap-4">
      <div class="flex items-start flex-col justify-start">
        <label for="firstName" class="text-sm text-gray-700 dark:text-gray-200 mr-2">First Name:</label>
        <input type="text" id="firstName" name="firstName" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<div class="flex items-start flex-col justify-start">
        <label for="username" class="text-sm text-gray-700 dark:text-gray-200 mr-2">Username:</label>
        <input type="text" id="username" name="username" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<div class="flex items-start flex-col justify-start">
        <label for="email" class="text-sm text-gray-700 dark:text-gray-200 mr-2">Email:</label>
        <input type="email" id="email" name="email" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<div class="flex items-start flex-col justify-start">
        <label for="password" class="text-sm text-gray-700 dark:text-gray-200 mr-2">Password:</label>
        <input type="password" id="password" name="password" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<div class="flex items-start flex-col justify-start">
        <label for="confirmPassword" class="text-sm text-gray-700 dark:text-gray-200 mr-2">Confirm Password:</label>
        <input type="password" id="confirmPassword" name="confirmPassword" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md shadow-sm">Register</button>
    </form>

<div class="mt-4 text-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">Already have an account?? </span>
      <a href="#" class="text-blue-500 hover:text-blue-600">Login</a>
    </div>
    </form>
  </div>

<!-- using SchoolAdmissionSystem.Models;

namespace SchoolAdmissionSystem.Repositories.Interfaces;

public interface IAcademicYearRepository
{
    Task<List<AcademicYear>> GetAllAsync();

Task<AcademicYear?> GetByIdAsync(Guid id);

Task<AcademicYear?> GetActiveAsync();

Task AddAsync(AcademicYear academicYear);

void Update(AcademicYear academicYear);

Task<bool> SaveChangesAsync();
}

using Microsoft.EntityFrameworkCore;
using SchoolAdmissionSystem.Data;
using SchoolAdmissionSystem.Enums;
using SchoolAdmissionSystem.Models;
using SchoolAdmissionSystem.Repositories.Interfaces;

namespace SchoolAdmissionSystem.Repositories;

public class AcademicYearRepository : IAcademicYearRepository
{
    private readonly AppDbContext _context;

public AcademicYearRepository(AppDbContext context)
    {
        _context = context;
    }

public async Task<List<AcademicYear>> GetAllAsync()
    {
        return await _context.AcademicYears.ToListAsync();
    }

public async Task<AcademicYear?> GetByIdAsync(Guid id)
    {
        return await _context.AcademicYears
            .FirstOrDefaultAsync(x => x.Id == id);
    }

public async Task<AcademicYear?> GetActiveAsync()
    {
        return await _context.AcademicYears
            .FirstOrDefaultAsync(x => x.Status == AcademicYearStatus.Active);
    }

public async Task AddAsync(AcademicYear academicYear)
    {
        await _context.AcademicYears.AddAsync(academicYear);
    }

public void Update(AcademicYear academicYear)
    {
        _context.AcademicYears.Update(academicYear);
    }

public async Task<bool> SaveChangesAsync()
    {
        return await _context.SaveChangesAsync() > 0;
    }
}

public interface IGradeLevelRepository
{
    Task<List<GradeLevel>> GetAllAsync();
    Task<GradeLevel?> GetByIdAsync(Guid id);
}

public class GradeLevelRepository : IGradeLevelRepository
{
    private readonly AppDbContext _context;

public GradeLevelRepository(AppDbContext context)
    {
        _context = context;
    }

public async Task<List<GradeLevel>> GetAllAsync()
    {
        return await _context.GradeLevels.ToListAsync();
    }

public async Task<GradeLevel?> GetByIdAsync(Guid id)
    {
        return await _context.GradeLevels
            .FirstOrDefaultAsync(x => x.Id == id);
    }
}

public interface ISchoolClassRepository
{
    Task<List<SchoolClass>> GetAllAsync();
    Task<SchoolClass?> GetByIdAsync(Guid id);
    Task<List<SchoolClass>> GetByAcademicYearIdAsync(Guid academicYearId);
    Task AddAsync(SchoolClass schoolClass);
    void Update(SchoolClass schoolClass);
    Task<bool> SaveChangesAsync();
}

public class SchoolClassRepository : ISchoolClassRepository
{
    private readonly AppDbContext _context;

public SchoolClassRepository(AppDbContext context)
    {
        _context = context;
    }

public async Task<List<SchoolClass>> GetAllAsync()
    {
        return await _context.SchoolClasses.ToListAsync();
    }

public async Task<SchoolClass?> GetByIdAsync(Guid id)
    {
        return await _context.SchoolClasses
            .FirstOrDefaultAsync(x => x.Id == id);
    }

public async Task<List<SchoolClass>> GetByAcademicYearIdAsync(Guid academicYearId)
    {
        return await _context.SchoolClasses
            .Where(x => x.AcademicYearId == academicYearId)
            .ToListAsync();
    }

public async Task AddAsync(SchoolClass schoolClass)
    {
        await _context.SchoolClasses.AddAsync(schoolClass);
    }

public void Update(SchoolClass schoolClass)
    {
        _context.SchoolClasses.Update(schoolClass);
    }

public async Task<bool> SaveChangesAsync()
    {
        return await _context.SaveChangesAsync() > 0;
    }
}

public interface IAdmissionApplicationRepository
{
    Task<List<AdmissionApplication>> GetAllAsync();
    Task<AdmissionApplication?> GetByIdAsync(Guid id);
    Task<List<AdmissionApplication>> GetByParentIdAsync(Guid parentId);
    Task AddAsync(AdmissionApplication application);
    void Update(AdmissionApplication application);
    Task<bool> SaveChangesAsync();
}
public class AdmissionApplicationRepository : IAdmissionApplicationRepository
{
    private readonly AppDbContext _context;

public AdmissionApplicationRepository(AppDbContext context)
    {
        _context = context;
    }

public async Task<List<AdmissionApplication>> GetAllAsync()
    {
        return await _context.AdmissionApplications.ToListAsync();
    }

public async Task<AdmissionApplication?> GetByIdAsync(Guid id)
    {
        return await _context.AdmissionApplications
            .FirstOrDefaultAsync(x => x.Id == id);
    }

public async Task<List<AdmissionApplication>> GetByParentIdAsync(Guid parentId)
    {
        return await _context.AdmissionApplications
            .Where(x => x.ParentId == parentId)
            .ToListAsync();
    }

public async Task AddAsync(AdmissionApplication application)
    {
        await _context.AdmissionApplications.AddAsync(application);
    }

public void Update(AdmissionApplication application)
    {
        _context.AdmissionApplications.Update(application);
    }

public async Task<bool> SaveChangesAsync()
    {
        return await _context.SaveChangesAsync() > 0;
    }
}

public interface IFeePaymentRepository
{
    Task<List<FeePayment>> GetAllAsync();
    Task<FeePayment?> GetByIdAsync(Guid id);
    Task<List<FeePayment>> GetByAdmissionApplicationIdAsync(Guid admissionApplicationId);
    Task AddAsync(FeePayment feePayment);
    void Update(FeePayment feePayment);
    Task<bool> SaveChangesAsync();
}

public class FeePaymentRepository : IFeePaymentRepository
{
    private readonly AppDbContext _context;

public FeePaymentRepository(AppDbContext context)
    {
        _context = context;
    }

public async Task<List<FeePayment>> GetAllAsync()
    {
        return await _context.FeePayments.ToListAsync();
    }

public async Task<FeePayment?> GetByIdAsync(Guid id)
    {
        return await _context.FeePayments
            .FirstOrDefaultAsync(x => x.Id == id);
    }

public async Task<List<FeePayment>> GetByAdmissionApplicationIdAsync(Guid admissionApplicationId)
    {
        return await _context.FeePayments
            .Where(x => x.AdmissionApplicationId == admissionApplicationId)
            .ToListAsync();
    }

public async Task AddAsync(FeePayment feePayment)
    {
        await _context.FeePayments.AddAsync(feePayment);
    }

public void Update(FeePayment feePayment)
    {
        _context.FeePayments.Update(feePayment);
    }

public async Task<bool> SaveChangesAsync()
    {
        return await _context.SaveChangesAsync() > 0;
    }
} -->

Related Examples

chart
to chart on your family and

Nishimwe Jeanine

1 year ago

1.1k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Hacker terminal #fake
hacker terminal tailwind css

QQ-VVN

1 year ago

1.8k
Checkbox
Checkbox

Aman kumar

2 years ago

2.8k
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Rajesh Pandey

1 year ago

1.8k
Active Beauty Main Page

Maxim

1 year ago

1.8k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Abhiraj

1 year ago

3.9k
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
Privacy Policy Page Template

Anonymous

1 year ago

2.2k
Login AND Signup
login and signup

Uwera Dorcas

1 year ago

1.3k