Home
Sudip chaudhary
Responsive Registration Form with Tailwind CSS

Responsive Registration Form with Tailwind CSS

A clean, mobile-friendly user registration form built using Tailwind CSS. It includes fields for full name, email, password, terms agreement, and styled components with hover and focus transitions.

This tailwind example is contributed by Sudip chaudhary, on 03-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Sudip chaudhary

847

Fork Fullscreen

<div class="bg-white shadow-xl rounded-2xl w-full max-w-md p-6 sm:p-8">
    <h2 class="text-3xl font-extrabold text-center text-gray-800 mb-6">Create an Account</h2>
    <form action="/register" method="POST" class="space-y-5">

<div>
        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
        <input type="text" id="name" name="name" required
          class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition" />
      </div>

<div>
        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
        <input type="email" id="email" name="email" required
          class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition" />
      </div>

<div>
        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
        <input type="password" id="password" name="password" required
          class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition" />
      </div>

<div class="flex items-center text-sm">
        <input type="checkbox" id="terms" required class="w-4 h-4 mr-2 text-blue-600 rounded focus:ring-0" />
        <label for="terms" class="text-gray-600">I agree to the <a href="#" class="text-blue-600 underline">terms & conditions</a></label>
      </div>

<button type="submit"
        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow-md transition-all duration-200">
        Register
      </button>

<p class="text-center text-sm text-gray-600 mt-4">
        Already have an account?
        <a href="/login" class="text-blue-600 font-medium hover:underline">Login</a>
      </p>
    </form>
  </div>

Related Examples

Otp form
SImple opt form with resend and verify button

Author:
Rafferty Kim

2 years ago

10.8k
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

1 year ago

3.4k
Age verification 18+

Author:
Maxim

11 months ago

1k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

2.3k
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

6 months ago

736
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

2 years ago

8.3k
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

1 month ago

91
Advanced phone verification

Author:
Md. Tofayel islam

1 year ago

2.3k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

4.2k
Login Form with Icon

Author:
Akai

3 months ago

150
Post Detail
Post detail with form

Author:
Sedat Kumcu

1 year ago

1.7k
Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components