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

Button Form Input Other

Author SHARIFUL ISLAM

Tailwind v3.4 1.8k 3

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>