Login / Register Form

Tailwind CSS styling only – no frameworks required

Smooth tab switch with JavaScript

Fully responsive for mobile and desktop

Clean, modern form design with interactive elements

This tailwind example is contributed by KULDEEP, on 29-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA,Register, Sign in

FAQ Form Login Form Other

Author KULDEEP

Tailwind v3.4 1.7k 2

Fork Fullscreen

<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-100 via-pink-200 to-yellow-100 px-4 py-12">
  <div class="bg-white rounded-3xl shadow-2xl max-w-4xl w-full overflow-hidden transition-transform transform hover:scale-105 duration-300">
    
    
    <div class="flex bg-gray-50 border-b border-gray-200 rounded-t-xl overflow-hidden shadow-inner">
      <button
        id="loginTab"
        class="w-1/2 py-4 px-6 text-lg font-semibold text-gray-700 hover:text-red-600 transition-all duration-300 focus:outline-none active-tab"
      >
        Login
      </button>
      <button
        id="registerTab"
        class="w-1/2 py-4 px-6 text-lg font-semibold text-gray-700 hover:text-red-600 transition-all duration-300 focus:outline-none"
      >
        Register
      </button>
    </div>

<div class="p-8 bg-white">
      
      <form id="loginForm" class="space-y-6 transition-opacity duration-500 opacity-1">
        <div>
          <label class="block text-sm font-medium text-gray-600 mb-2">Email</label>
          <input
            type="email"
            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-400 transition focus:shadow-lg"
            placeholder="example@example.com"
            required
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-600 mb-2">Password</label>
          <input
            type="password"
            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-400 transition focus:shadow-lg"
            placeholder="••••••••"
            required
          />
        </div>
        <button
          type="submit"
          class="w-full bg-gradient-to-r from-pink-500 to-red-500 text-white py-3 px-6 rounded-xl font-semibold shadow-lg hover:from-pink-600 hover:to-red-600 transition-transform transform hover:scale-105 duration-300"
        >
          Login
        </button>
      </form>

<form id="registerForm" class="space-y-6 hidden opacity-0 transition-opacity duration-500">
        <div>
          <label class="block text-sm font-medium text-gray-600 mb-2">Full Name</label>
          <input
            type="text"
            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-400 transition focus:shadow-lg"
            placeholder="John Doe"
            required
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-600 mb-2">Email</label>
          <input
            type="email"
            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-400 transition focus:shadow-lg"
            placeholder="example@example.com"
            required
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-600 mb-2">Password</label>
          <input
            type="password"
            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-400 transition focus:shadow-lg"
            placeholder="••••••••"
            required
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-600 mb-2">Confirm Password</label>
          <input
            type="password"
            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-400 transition focus:shadow-lg"
            placeholder="••••••••"
            required
          />
        </div>
        <button
          type="submit"
          class="w-full bg-gradient-to-r from-pink-500 to-red-500 text-white py-3 px-6 rounded-xl font-semibold shadow-lg hover:from-pink-600 hover:to-red-600 transition-transform transform hover:scale-105 duration-300"
        >
          Register
        </button>
      </form>
    </div>
  </div>

<script>
    const loginTab = document.getElementById('loginTab');
    const registerTab = document.getElementById('registerTab');
    const loginForm = document.getElementById('loginForm');
    const registerForm = document.getElementById('registerForm');

function switchToLogin() {
      loginForm.classList.remove('hidden');
      loginForm.classList.remove('opacity-0');
      loginForm.classList.add('opacity-100');
      registerForm.classList.add('hidden');
      registerForm.classList.remove('opacity-100');
      registerForm.classList.add('opacity-0');
      loginTab.classList.add('text-red-600', 'border-b-4', 'border-red-600');
      loginTab.classList.remove('text-gray-700', 'border-b-2');
      registerTab.classList.remove('text-red-600', 'border-b-4', 'border-red-600');
      registerTab.classList.add('text-gray-700', 'border-b-2');
    }

function switchToRegister() {
      registerForm.classList.remove('hidden');
      registerForm.classList.remove('opacity-0');
      registerForm.classList.add('opacity-100');
      loginForm.classList.add('hidden');
      loginForm.classList.remove('opacity-100');
      loginForm.classList.add('opacity-0');
      registerTab.classList.add('text-red-600', 'border-b-4', 'border-red-600');
      registerTab.classList.remove('text-gray-700', 'border-b-2');
      loginTab.classList.remove('text-red-600', 'border-b-4', 'border-red-600');
      loginTab.classList.add('text-gray-700', 'border-b-2');
    }

loginTab.addEventListener('click', switchToLogin);
    registerTab.addEventListener('click', switchToRegister);

// Initialize default tab
    switchToLogin();
  </script>

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.9k
Login form

Gopi Yadav

4 years ago

12.1k
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.7k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.8k
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.3k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

4 years ago

12.2k