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

Form

Author Sudip chaudhary

Tailwind v3.4 1.5k 6

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

Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Anonymous

3 years ago

13.6k
3D Login form
Made a responsive and the 3d animative

Sufyan jutt

9 months ago

727
Credit card form

Oliver Hansen

3 years ago

18k
Contact Form with fabform.io
Contact form

Ho O

1 year ago

2k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Abhiraj

1 year ago

2.9k
Form

Ramesh kumar Sah

1 year ago

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

Akram Khan

2 years ago

3.5k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Muhammad Umair Arshad

1 year ago

1.2k
Reset Password UI
Reset password screen built with pure HTML and Tailwind CSS. Includes new password and confirm password fields, password strength indicator, security requirements checklist, inline SVG icons, and a premium glassmorphism SaaS interface.

JUGENDRA GANGWAR

1 month ago

218
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

KULDEEP

1 year ago

1.6k
Contact Us form

ABDO-SY

1 year ago

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

Ameth Galarcio

2 years ago

5.3k