Home
Sonam Sherpa
Register Form

Register Form

A simple and minimalistic register form.

This tailwind example is contributed by Sonam Sherpa, on 14-Sep-2025. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Sonam Sherpa

360

Fork Fullscreen

<div class="flex justify-center items-center min-h-screen bg-white">
      <div class="w-full flex items-center justify-center">
        <div class="w-3/4 max-w-md p-8 bg-white shadow-lg rounded-lg">
          <h2 class="text-2xl font-bold text-blue-600 mb-6">Sign up</h2>
          <form>
            <div class="mb-4">
              <label class="block text-gray-700 text-sm mb-2">
                Username
              </label>
              <input
                type="text"
                name="username"
                placeholder="Enter your username"
                class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

<div class="mb-4">
              <label class="block text-gray-700 text-sm mb-2">Email</label>
              <input
                type="email"
                name="email"
                placeholder="Enter your email"
                class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

<div class="mb-4">
              <label class="block text-gray-700 text-sm mb-2">
                Password
              </label>
              <input
                type="password"
                name="password"
                placeholder="Enter your password"
                class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

<div class="mb-6">
              <label class="block text-gray-700 text-sm mb-2">
                Confirm Password
              </label>
              <input
                type="password"
                name="confirmPassword"
                placeholder="Confirm your password"
                class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

<button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
              Sign up
            </button>
          </form>
          <button class="w-full mt-4 border border-gray-300 py-2 rounded-lg flex items-center justify-center hover:bg-gray-100 transition">
            <img
              src="https://www.svgrepo.com/show/355037/google.svg"
              alt="Google"
              class="w-5 h-5 mr-2"
            />
            Sign-up with Google
          </button>

<p class="mt-6 text-sm text-center text-gray-600">
            Already have an account?
            <a href="/signin" class="text-blue-600 hover:underline">
              Sign in
            </a>
          </p>
        </div>
      </div>
    </div>

Related Examples

SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Author:
Rajesh Maheshwari

11 months ago

1.5k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

3 years ago

15k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

3 years ago

44.5k
Contact Form for fabform.io
Contact form that uses fabform.io

Author:
Ho O

1 year ago

800
Login form

Author:
Rajesh Maheshwari

11 months ago

1.7k
Otp form
SImple opt form with resend and verify button

Author:
Rafferty Kim

2 years ago

10.9k
Tag input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.1k
Registration form

Author:
Juan D. Cortorreal

2 months ago

154
Book appointment form

Author:
Lukas Müller

3 years ago

28.3k
RegistrationForm

Author:
Ramesh Kumar Sah

4 months ago

293
Tailwind CSS Contact Form
A clean contact form with a supporting image, built using Tailwind CSS by ReadymadeUI. Browse more free UI components and templates at readymadeui.com.

Author:
ReadyMadeUI

2 months ago

98
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components