Home
SHARIFUL ISLAM
Responsive Sign-Up Form with TailwindCSS

Responsive Sign-Up Form with TailwindCSS

Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

This tailwind example is contributed by SHARIFUL ISLAM, on 12-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Button Form Input Other

Author SHARIFUL ISLAM

1.5k

Fork Fullscreen

<div class="flex items-center justify-center h-screen">
    <div class="w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
    
    <div class="text-center">
      <h1 class="text-2xl font-semibold text-blue-600 flex items-center justify-center">
        <span class="mr-1 text-3xl font-bold">ES</span>
        BAZAR
      </h1>
      <p class="text-gray-500 text-sm mt-1">
        Best online ecommerce website for you
      </p>
    </div>

<div class="my-6 border-t border-gray-300 relative">
      <span class="absolute top-[-10px] bg-white left-1/2 transform -translate-x-1/2 px-3 text-gray-500">
        Sign up
      </span>
    </div>

<form class="space-y-4">
      
      <div>
        <input
          type="text"
          placeholder="Full Name"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
      </div>

<div>
        <input
          type="text"
          placeholder="Mobile Number"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
      </div>

<div>
        <input
          type="email"
          placeholder="Email"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
      </div>

<div class="relative">
        <input
          type="password"
          placeholder="Password"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
        <span class="absolute right-3 top-2.5 text-gray-400 cursor-pointer">
          👁️
        </span>
      </div>

<div class="relative">
        <input
          type="password"
          placeholder="Confirm Password"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
        <span class="absolute right-3 top-2.5 text-gray-400 cursor-pointer">
          👁️
        </span>
      </div>

<button
        type="submit"
        class="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-2 rounded-lg hover:from-blue-600 hover:to-blue-700 transition"
      >
        Sign Up
      </button>
    </form>

<div class="mt-4 text-center">
      <p class="text-gray-500 text-sm">
        Have your account? 
        <a href="#" class="text-blue-500 font-medium hover:underline">Login Now</a>
      </p>
    </div>
  </div>
</div>

Related Examples

Contact Page

Author:
Sedat Kumcu

1 year ago

1.7k
Button wih hover gradient
Works well with the dark theme

Author:
Leif99

2 years ago

18.3k
Share button

Author:
Maxim

1 year ago

1.5k
Contact Form for fabform.io
Contact form that uses fabform.io

Author:
Ho O

1 year ago

949
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

1 year ago

2.9k
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

2 years ago

21.6k
Settings Button

Author:
Arya

3 years ago

10.8k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

4 months ago

250
neon-button-purple

Author:
Mohammad Rashel

2 months ago

352
Product hunt showcase

Author:
Lukas Müller

3 years ago

12.4k
color blur
blur

Author:
BocchiChan

1 year ago

1.8k
Login Form with Icon

Author:
Akai

5 months ago

167

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components