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

583

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

Email format
This is a ui component to be used to send emails with custom design (deigned with tailwindcss)

Author:
Ranit Saha

9 months ago

1.1k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

5k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
SANJAY SINGH GARIYA

4 months ago

466
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.1k
Checkout form

Author:
Sienna

2 years ago

13.7k
Contact Form Component with Responsive Design and Decorative Elements
A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

Author:
Homayoun

2 weeks ago

20
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

6 months ago

588
login
Dark mode login

Author:
Hacker Development

5 months ago

968
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

11.9k
Sign Up form with dark mode support

Author:
Anonymous

2 years ago

11.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 uses fabform.io

Author:
Ti To

1 year ago

6.7k
Simple login form

Author:
R Thapa

2 years ago

23.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components