Home
Jay Dee
Modern and Fully Responsive Login Form with Social Media Authentication and Floating Label Inputs

Modern and Fully Responsive Login Form with Social Media Authentication and Floating Label Inputs

This sleek, fully responsive login form is designed with usability and aesthetics in mind. It features a clean, minimalistic design with smooth transitions and modern UI elements. The form includes:

Email and Password Inputs: Both fields feature floating labels that animate seamlessly when focused or filled, ensuring a visually appealing user experience. Input validation is built-in, and placeholders are hidden for a clean look.

Social Media Login Buttons: Integrated Google and Facebook sign-in buttons, allowing users to authenticate easily using their social media accounts. These buttons are styled to match the platform’s branding and include an intuitive hover effect to enhance interactivity.

“Forgot Password?” & “Remember Me” Options: The form allows users to easily reset their password or opt to remain logged in. These options are aligned neatly, and the labels are clear and concise for accessibility.

Custom Styling: Built with Tailwind CSS, ensuring a responsive, mobile-first design that adapts seamlessly to any screen size. The form's design utilizes smooth hover effects, rounded corners, subtle shadow effects, and modern color schemes for an enhanced visual appeal.

Easy Integration: This component can be easily integrated into any web application. Whether you're building a dashboard, a website, or a SaaS product, this login form is a perfect fit for any modern application that needs secure user authentication.

Features:
Fully responsive: Looks great on mobile, tablet, and desktop.
Floating labels: Clear input fields with animated labels that enhance the user interface.
Social Media Integration: Includes Google and Facebook login options for quick authentication.
Password Reset: A "Forgot Password?" link allows for easy password recovery.
Remember Me: A checkbox for staying logged in.
Customizable Design: Built using Tailwind CSS, easy to adapt to match any branding.
Smooth Interactivity: Subtle hover effects and animations for a modern user experience.
This login form not only provides the essential features needed for user authentication but also elevates the user experience with its modern design and smooth animations.

This tailwind example is contributed by Jay Dee, on 13-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Jay Dee

940

Fork Fullscreen

<div class="mb-8">
        <h1 class="text-3xl font-semibold text-gray-900 leading-tight">
          Login to your account
        </h1>
        <p class="text-sm text-gray-600 mt-2">
          Don't have an account? 
          <a href="#" class="text-blue-500 hover:underline font-medium">Sign Up</a>
        </p>
      </div>

<div class="space-y-3">
        <button class="w-full flex items-center justify-center p-3 border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none transition-colors">
          <img src="img/google-icon.svg" alt="Google" class="w-5 h-5 mr-2" />
          Sign in with Google
        </button>
        <button class="w-full flex items-center justify-center p-3 border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none transition-colors">
          <img src="img/facebook-icon.svg" alt="Facebook" class="w-5 h-5 mr-2" />
          Sign in with Facebook
        </button>
      </div>

<div class="flex items-center my-6">
        <hr class="flex-grow border-gray-300" />
        <span class="px-2 text-sm text-gray-500">OR</span>
        <hr class="flex-grow border-gray-300" />
      </div>

<form id="loginForm" class="space-y-4">
        
        <div class="bg-white rounded-lg max-w-md mx-auto py-2">
          <div class="relative bg-inherit">
            <input
              type="email"
              id="email"
              name="email"
              class="peer bg-transparent h-12 w-full rounded-lg text-gray-900 placeholder-transparent ring-2 ring-gray-300 px-4 focus:ring-sky-500 focus:outline-none focus:border-sky-600 transition-all"
              placeholder="Enter your email"
              required
            />
            <label
              for="email"
              class="absolute cursor-text left-4 -top-3 text-sm text-gray-600 bg-white px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-3 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
            >
              Enter your email
            </label>
          </div>
        </div>

<div class="bg-white rounded-lg max-w-md mx-auto py-2">
          <div class="relative bg-inherit">
            <input
              type="password"
              id="password"
              name="password"
              class="peer bg-transparent h-12 w-full rounded-lg text-gray-900 placeholder-transparent ring-2 ring-gray-300 px-4 focus:ring-sky-500 focus:outline-none focus:border-sky-600 transition-all"
              placeholder="Enter your password"
              required
            />
            <label
              for="password"
              class="absolute cursor-text left-4 -top-3 text-sm text-gray-600 bg-white px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-3 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
            >
              Password
            </label>
          </div>
        </div>

<div class="flex justify-between items-center">
          <div class="flex items-center">
            <input
              type="checkbox"
              id="rememberMe"
              class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300"
            />
            <label for="rememberMe" class="ml-2 text-sm text-gray-600">
              Remember me
            </label>
          </div>
          <a href="#" class="text-sm text-blue-500 hover:underline">
            Forgot Password?
          </a>
        </div>

<button
          type="submit"
          class="w-full p-3 bg-black text-white rounded-lg hover:bg-gray-800 focus:outline-none transition-colors"
        >
          Login
        </button>
      </form>
    </div>
  </div>
</div>

Related Examples

Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

3 weeks ago

27
Responsive login form
form with social login buttons

Author:
Aman kumar

1 year ago

4.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.

Author:
Anonymous

1 year ago

3.2k
Sign Up form with dark mode support

Author:
Anonymous

2 years ago

11.9k
User registration form with Instructions

Author:
Fagundo67

2 years ago

24.3k
Login

Author:
Amine Ghanim

6 months ago

1.8k
Login Card

Author:
Anonymous

1 year ago

6.7k
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

4 months ago

572
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
AyDin VM

1 year ago

4.5k
login
login

Author:
Abhishek Kumar

1 month ago

281
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

8 months ago

2.6k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

5 months ago

784

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components