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

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