<!--
@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>
