Login Product Light

                <!--
@type: Login
@industry: Product
@style: Light
@category: Page Section, Navigation, UI Element
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-blue-100: #dbeafe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;

  /* Container */
  --login-container-max-width: 28rem; /* max-w-md */
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Styles */
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* Component Styles */
.login-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-50);
  padding: var(--spacing-10) var(--spacing-4);
}

.login-container {
  max-width: var(--login-container-max-width);
  width: 100%;
}

.login-header {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.login-title {
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-2);
}

.login-subtitle {
  color: var(--color-gray-600);
  font-size: 1rem;
}

.login-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  padding: var(--spacing-8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Social Login */
.social-login {
  margin-bottom: var(--spacing-8);
}

.social-text {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  text-align: center;
  margin-bottom: var(--spacing-4);
}

.social-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
}

.social-button {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-800);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s;
  cursor: pointer;
}

.social-button:hover {
  background-color: var(--color-gray-50);
}

.social-icon {
  height: 1.25rem;
  width: 1.25rem;
}

/* Divider */
.divider {
  position: relative;
  margin: var(--spacing-6) 0;
}

.divider-line {
  position: absolute;
  inset: 50% 0;
  border-top: 1px solid var(--color-gray-200);
}

.divider-text {
  position: relative;
  display: flex;
  justify-content: center;
}

.divider-text span {
  padding: 0 var(--spacing-4);
  background-color: var(--color-white);
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

/* Login Form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-1);
}

.form-input {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  padding: var(--spacing-3) var(--spacing-4);
  width: 100%;
  transition: all 0.2s;
}

.form-input:focus {
  border-color: var(--color-blue-400);
  box-shadow: 0 0 0 3px var(--color-blue-100);
  outline: none;
}

.form-input::placeholder {
  color: var(--color-gray-600);
}

.password-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-1);
}

.forgot-link {
  font-size: 0.875rem;
  color: var(--color-blue-600);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s;
}

.forgot-link:hover {
  color: var(--color-blue-700);
}

.remember-group {
  display: flex;
  align-items: center;
}

.remember-checkbox {
  height: 1rem;
  width: 1rem;
  color: var(--color-blue-600);
  border: 1px solid var(--color-gray-300);
  border-radius: 0.25rem;
}

.remember-checkbox:focus {
  box-shadow: 0 0 0 2px var(--color-blue-400);
}

.remember-label {
  margin-left: var(--spacing-2);
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.submit-button {
  width: 100%;
  background-color: var(--color-blue-600);
  color: var(--color-white);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 0.5rem;
  font-weight: 400;
  font-size: 1rem;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
}

.submit-button:hover {
  background-color: var(--color-blue-700);
}

.submit-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-blue-300), 0 0 0 4px var(--color-white);
}

/* Sign Up Link */
.signup-text {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-gray-600);
  margin-top: var(--spacing-8);
}

.signup-link {
  color: var(--color-blue-600);
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s;
}

.signup-link:hover {
  color: var(--color-blue-700);
}

/* Features */
.features {
  margin-top: var(--spacing-10);
}

.login-features-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.login-feature-item {
  display: flex;
  align-items: center;
}

.login-feature-icon {
  height: 1.25rem;
  width: 1.25rem;
  color: var(--color-blue-600);
  margin-right: var(--spacing-2);
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .login-section {
    padding: var(--spacing-10) var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .login-section {
    padding: var(--spacing-10) var(--spacing-8);
  }
}
</style>

<section class="login-section">
  <div class="login-container">
    <div class="login-header">
      <h1 class="login-title">Welcome back</h1>
      <p class="login-subtitle">Sign in to manage your product dashboard</p>
    </div>
    
    <div class="login-card">
      <!-- Social login options -->
      <div class="social-login">
        <p class="social-text">Sign in with</p>
        <div class="social-buttons">
          <button type="button" class="social-button" aria-label="Sign in with Google">
            <img src="https://landinggo.com/assets/img/stock/login/google.svg" alt="Google" class="social-icon" loading="lazy" width="20" height="20">
          </button>
          <button type="button" class="social-button" aria-label="Sign in with GitHub">
            <img src="https://landinggo.com/assets/img/stock/login/github.svg" alt="GitHub" class="social-icon" loading="lazy" width="20" height="20">
          </button>
          <button type="button" class="social-button" aria-label="Sign in with LinkedIn">
            <img src="https://landinggo.com/assets/img/stock/login/linkedin.svg" alt="LinkedIn" class="social-icon" loading="lazy" width="20" height="20">
          </button>
        </div>
      </div>
      
      <!-- Divider -->
      <div class="divider">
        <div class="divider-line"></div>
        <div class="divider-text">
          <span>Or continue with email</span>
        </div>
      </div>
      
      <!-- Login form -->
      <form class="login-form" action="#" method="POST" aria-label="Login form">
        <div class="form-group">
          <label for="email" class="form-label">Email</label>
          <input id="email" name="email" type="email" autocomplete="email" required aria-required="true" 
                 class="form-input" 
                 placeholder="[email protected]">
        </div>
        
        <div class="form-group">
          <div class="password-header">
            <label for="password" class="form-label">Password</label>
            <a href="#" class="forgot-link">Forgot?</a>
          </div>
          <input id="password" name="password" type="password" autocomplete="current-password" required aria-required="true" 
                 class="form-input" 
                 placeholder="Enter your password">
        </div>
        
        <div class="remember-group">
          <input id="remember-me" name="remember-me" type="checkbox" class="remember-checkbox" aria-checked="false">
          <label for="remember-me" class="remember-label">Remember me for 30 days</label>
        </div>
        
        <button type="submit" 
                class="submit-button" 
                aria-label="Sign in to your account">
          Sign in
        </button>
      </form>
    </div>
    
    <!-- Sign up link -->
    <p class="signup-text">
      Don't have an account?
      <a href="#" class="signup-link">Create a free account</a>
    </p>
    
    <!-- Product features teaser -->
    <div class="features">
      <div class="login-features-list">
        <div class="login-feature-item">
          <svg xmlns="http://www.w3.org/2000/svg" class="login-feature-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
          <span>Free 14-day trial</span>
        </div>
        <div class="login-feature-item">
          <svg xmlns="http://www.w3.org/2000/svg" class="login-feature-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
          <span>No credit card required</span>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    
    if (!email || !password) {
        alert('Please fill in all fields');
        return;
    }
    
    if (!email.includes('@')) {
        alert('Please enter a valid email address');
        return;
    }
    
    // Here you would typically handle the form submission
    console.log('Form submitted:', { email, password });
});
</script>
            

                <!--
@type: Login
@industry: Product
@style: Light
@category: Page Section, Navigation, UI Element
@framework: Tailwind
@license: Free
-->

<section class="min-h-screen flex items-center justify-center bg-gray-50 py-10 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-md w-full space-y-8">
    <div class="text-center mb-8">
      <h1 class="text-3xl font-medium text-gray-800 mb-2">Welcome back</h1>
      <p class="text-gray-600 text-base">Sign in to manage your product dashboard</p>
    </div>
    
    <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
      <!-- Social login options -->
      <div class="mb-8">
        <p class="text-sm text-gray-600 text-center mb-4">Sign in with</p>
        <div class="grid grid-cols-3 gap-3">
          <button type="button" class="bg-white border border-gray-200 text-gray-800 px-4 py-3 rounded-lg hover:bg-gray-50 shadow-sm flex justify-center items-center transition-colors" aria-label="Sign in with Google">
            <img src="https://landinggo.com/assets/img/stock/login/google.svg" alt="Google" class="h-5 w-5" loading="lazy" width="20" height="20">
          </button>
          <button type="button" class="bg-white border border-gray-200 text-gray-800 px-4 py-3 rounded-lg hover:bg-gray-50 shadow-sm flex justify-center items-center transition-colors" aria-label="Sign in with GitHub">
            <img src="https://landinggo.com/assets/img/stock/login/github.svg" alt="GitHub" class="h-5 w-5" loading="lazy" width="20" height="20">
          </button>
          <button type="button" class="bg-white border border-gray-200 text-gray-800 px-4 py-3 rounded-lg hover:bg-gray-50 shadow-sm flex justify-center items-center transition-colors" aria-label="Sign in with LinkedIn">
            <img src="https://landinggo.com/assets/img/stock/login/linkedin.svg" alt="LinkedIn" class="h-5 w-5" loading="lazy" width="20" height="20">
          </button>
        </div>
      </div>
      
      <!-- Divider -->
      <div class="relative my-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-200"></div>
        </div>
        <div class="relative flex justify-center">
          <span class="px-4 bg-white text-sm text-gray-600">Or continue with email</span>
        </div>
      </div>
      
      <!-- Login form -->
      <form class="space-y-6" action="#" method="POST" aria-label="Login form">
        <div>
          <label for="email" class="block text-sm font-normal text-gray-800 mb-1">Email</label>
          <input id="email" name="email" type="email" autocomplete="email" required aria-required="true" 
            class="bg-white border border-gray-200 rounded-lg px-4 py-3 w-full focus:border-blue-400 focus:ring-2 focus:ring-blue-100 outline-none transition-colors" 
            placeholder="[email protected]">
        </div>
        
        <div>
          <div class="flex items-center justify-between mb-1">
            <label for="password" class="block text-sm font-normal text-gray-800">Password</label>
            <a href="#" class="text-sm text-blue-600 hover:text-blue-700 font-normal transition-colors">Forgot?</a>
          </div>
          <input id="password" name="password" type="password" autocomplete="current-password" required aria-required="true" 
            class="bg-white border border-gray-200 rounded-lg px-4 py-3 w-full focus:border-blue-400 focus:ring-2 focus:ring-blue-100 outline-none transition-colors" 
            placeholder="Enter your password">
        </div>
        
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-400 border-gray-300 rounded" aria-checked="false">
          <label for="remember-me" class="ml-2 block text-sm text-gray-600">Remember me for 30 days</label>
        </div>
        
        <button type="submit" 
          class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-normal hover:bg-blue-700 transition-colors text-base focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2" 
          aria-label="Sign in to your account">
          Sign in
        </button>
      </form>
    </div>
    
    <!-- Sign up link -->
    <p class="text-center text-sm text-gray-600 mt-8">
      Don't have an account?
      <a href="#" class="text-blue-600 font-normal hover:text-blue-700 transition-colors">Create a free account</a>
    </p>
    
    <!-- Product features teaser -->
    <div class="mt-10">
      <div class="flex items-center justify-center space-x-6 text-sm text-gray-600">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
          <span>Free 14-day trial</span>
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
          <span>No credit card required</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Simple form validation script -->
<script>
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    
    if (!email || !password) {
        alert('Please fill in all fields');
        return;
    }
    
    if (!email.includes('@')) {
        alert('Please enter a valid email address');
        return;
    }
    
    // Here you would typically handle the form submission
    console.log('Form submitted:', { email, password });
});
</script>