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 v3.4. It is responsive.

Form

Author Sonam Sherpa

Tailwind v3.4 913 4

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

tailwind contact form
tailwind contact form

Geoffrey Callaghan

2 years ago

3k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Anonymous

1 year ago

864
Forgot Password Screen

JUGENDRA GANGWAR

12 hours ago

7
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Akram Khan

2 years ago

3.5k
form3

ABDO-SY

1 year ago

2.1k
Login Form
Login Form template using angular

nitro-x

2 months ago

200
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.8k
Payment Form

ABDO-SY

1 year ago

2.4k
Apply Coupon Code form

Lyra Ravensong

3 years ago

9.3k
Contact Form with fabform.io
Contact form

Ho O

1 year ago

1.9k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Ti To

2 years ago

8.9k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.7k