→ Alex Morgan
→ User Authentication Login Card

User Authentication Login Card

A clean and modern login card with username and password fields, remember me option, and social media login alternatives.

This Example is contributed by Alex Morgan, on 14-Mar-2025. It is responsive. similar terms for this example are Card Design,Cards,Form Component,Login,Register,Sign in

Card Form Login Form Social Login Authentication Social

Author Alex Morgan

Fork Fullscreen

<div class="login-container">
  <div class="login-card">
    <div class="login-header">
      <h2>Welcome Back</h2>
      <p>Please enter your credentials to login</p>
    </div>
    <div class="login-form">
      <div class="input-group">
        <label for="username">Username</label>
        <input type="text" id="username" placeholder="Enter your username" />
      </div>
      <div class="input-group">
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Enter your password" />
        <span class="password-toggle" id="passwordToggle">Show</span>
      </div>
      <div class="options">
        <div class="remember-me">
          <input type="checkbox" id="remember" />
          <label for="remember">Remember me</label>
        </div>
        <a href="#" class="forgot-password">Forgot password?</a>
      </div>
      <button type="submit" class="login-button">Login</button>
    </div>
    <div class="separator">
      <span>or continue with</span>
    </div>
    <div class="social-logins">
      <button class="social-btn google">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 0 1-5.279-5.28 5.27 5.27 0 0 1 5.279-5.279c1.259 0 2.397.447 3.29 1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233a8.908 8.908 0 0 0-8.934 8.934 8.907 8.907 0 0 0 8.934 8.934c4.467 0 8.529-3.249 8.529-8.934 0-.528-.081-1.097-.202-1.625z"></path></svg>
        Google
      </button>
      <button class="social-btn facebook">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
        Facebook
      </button>
    </div>
    <div class="register-link">
      <p>Don't have an account? <a href="#">Register</a></p>
    </div>
  </div>
</div>

Related Examples