Responsive Form

This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in,Email campaign

Form Login Form Newsletter

Author Rajesh Maheshwari

Tailwind v3.4 1.7k 3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<body class="bg-black">
  <div class="container mx-auto px-4 py-12 max-w-3xl">
    <div class="bg-white rounded-2xl shadow-lg p-6 md:p-10">
      <div class="mb-8">
        <h2 class="text-2xl font-bold text-gray-800">Create Your Account</h2>
        <p class="text-gray-500 mt-2">Fill in the details below to get started</p>
      </div>

<form>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          
          <div>
            <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
            <input type="text" id="firstName" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out" placeholder="Rajesh">
          </div>

<div>
            <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
            <input type="text" id="lastName" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out" placeholder="Maheshwari">
          </div>

<div class="md:col-span-2">
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
            <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out" placeholder="rajesh@example.com">
          </div>

<div class="md:col-span-2">
            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
            <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out" placeholder="+91 1234567890">
          </div>

<div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <input type="password" id="password" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out" placeholder="••••••••">
          </div>

<div>
            <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
            <input type="password" id="confirmPassword" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out" placeholder="••••••••">
          </div>

<div>
            <label for="dob" class="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label>
            <input type="date" id="dob" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out">
          </div>

<div>
            <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Country</label>
            <select id="country" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out">
              <option value="" selected disabled>Select your country</option>
              <option value="us">United States</option>
              <option value="ca">Canada</option>
              <option value="uk">United Kingdom</option>
              <option value="au">Australia</option>
            </select>
          </div>

<div class="md:col-span-2">
            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
            <textarea id="address" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out" placeholder="Enter your full address"></textarea>
          </div>

<div class="md:col-span-2">
            <label for="occupation" class="block text-sm font-medium text-gray-700 mb-1">Occupation</label>
            <input type="text" id="occupation" class="w-full px-4 py-3 rounded-lg border border-gray-300  transition duration-150 ease-in-out" placeholder="Software Developer">
          </div>

<div class="md:col-span-2 mt-2">
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input id="terms" type="checkbox" class="h-5 w-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
              </div>
              <div class="ml-3 text-sm">
                <label for="terms" class="font-medium text-gray-700">I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">Terms and Conditions</a> and <a href="#" class="text-indigo-600 hover:text-indigo-500">Privacy Policy</a></label>
              </div>
            </div>
          </div>
        </div>

<div class="mt-8">
          <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition duration-150 ease-in-out shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
            Create Account
          </button>
        </div>

<div class="text-center mt-6">
          <p class="text-sm text-gray-600">
            Already have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Sign in</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

Related Examples

Login Form with Icon

Prashant

4 years ago

18.9k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.8k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.7k
Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

16k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k