Login Form

This tailwind example is contributed by UI-Templates, on 13-Oct-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author UI-Templates

Tailwind v3.4 1.2k 1

Fork Fullscreen

<div class="lg:w-1/2 hidden lg:block">
      <img
        src="https://images.unsplash.com/photo-1508780709619-79562169bc64?auto=format&fit=crop&w=800&q=80"
        alt="Login Image"
        class="w-full h-full object-cover"
      />
    </div>

<div class="w-full lg:w-1/2 p-10 flex flex-col justify-center">
      
      
      <h1 class="text-3xl sm:text-4xl font-bold text-white mb-6">Welcome Back</h1>

<div class="flex gap-4 mb-6">
        <button class="flex items-center justify-center w-full py-2 px-4 rounded-xl bg-blue-600 hover:bg-blue-700 text-white shadow-lg transition">
          <div class="mr-2">
            
          </div>
          <span>Login with Google</span>
        </button>
        <button class="flex items-center justify-center w-full py-2 px-4 rounded-xl bg-gray-700 hover:bg-gray-600 text-white shadow-lg transition">
          <div class="mr-2">
            
          </div>
          <span>Login with GitHub</span>
        </button>
      </div>

<div class="flex items-center text-gray-400 mb-6">
        <hr class="flex-1 border-gray-600" />
        <span class="px-2 text-sm">or</span>
        <hr class="flex-1 border-gray-600" />
      </div>

<form class="flex flex-col gap-4">
        <input
          type="email"
          placeholder="Email"
          class="w-full px-4 py-2 rounded-xl bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <input
          type="password"
          placeholder="Password"
          class="w-full px-4 py-2 rounded-xl bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button type="submit" class="py-2 px-4 rounded-xl bg-gradient-to-r from-cyan-400 to-purple-500 text-white font-bold shadow-lg hover:from-cyan-500 hover:to-purple-600 transition">
          <span>Login</span>
        </button>

<p class="flex justify-between text-sm text-gray-400 mt-2">
          <a href="#" class="hover:text-white transition">Forgot password?</a>
          <a href="#" class="hover:text-white transition">Sign up</a>
        </p>
      </form>

</div>
  </div>
</div>

<a href="https://discord.gg/95CveWrbK8"
   target="_blank"
   rel="noopener"
   class="absolute bottom-4 right-4 flex items-center gap-2 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-500 transition-all duration-300 z-50 backdrop-blur-md">
  
  <span class="text-sm font-medium">Made by Chandrika</span>

</div>

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

Amit Pachange

4 years ago

13.7k
Sign In 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.3k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

4 years ago

12.1k