Home
KULDEEP
Login / Register Form

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 CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA,Register, Sign in

FAQ Form Login Form Other

Author KULDEEP

635

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

Author:
Leon Bachmann

2 years ago

13.2k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

6 months ago

895
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

1k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

675
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

1 year ago

7.9k
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

5 months ago

897
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

4 months ago

285
Login form

Author:
Gopi Yadav

3 years ago

11.1k
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

6 months ago

913
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

4 months ago

378
mechanical login
mechanical

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

757
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

3 weeks ago

45

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components