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

346

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

Background image section

Author:
Marc

1 year ago

5.4k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
Anonymous

1 year ago

11.6k
walletp2p

Author:
Anonymous

4 months ago

720
Survey form
User survey form

Author:
JaxStone

2 years ago

15.1k
Contact me form
contact me form

Author:
Geoffrey Callaghan

1 year ago

6.4k
Simple count down timer

Author:
Gopi Yadav

2 years ago

14.7k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

3 months ago

657
Payment Cards

Author:
Shammi Nethupul

9 months ago

2k
Dioganal cuts Buttons

Author:
Adulik

1 year ago

6.2k
Reservation form

Author:
Lukas Müller

2 years ago

12.6k
Form Layouts

Author:
Anonymous

1 year ago

2.7k
Text Rpg UI

Author:
Crimson

4 months ago

451

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components