<!--
@type: Login
@industry: Business
@style: Modern
@category: UI Element, Page Section, Navigation
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-slate-50: #f8fafc;
--color-slate-100: #f1f5f9;
--color-slate-200: #e2e8f0;
--color-slate-300: #cbd5e1;
--color-slate-400: #94a3b8;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-200: #c7d2fe;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-white: #ffffff;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
/* Font sizes */
--text-sm: 0.875rem;
--text-base: 1rem;
--text-2xl: 1.5rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.login-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-slate-50);
padding: 2rem 1rem;
}
.login-container {
max-width: 28rem;
width: 100%;
}
.login-card {
background-color: var(--color-white);
border-radius: 0.75rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid var(--color-slate-200);
padding: var(--spacing-8);
margin-bottom: var(--spacing-8);
}
.login-title {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: var(--spacing-2);
}
.login-description {
color: var(--color-slate-600);
margin-bottom: var(--spacing-6);
font-size: var(--text-base);
}
.login-form {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
.form-group label {
display: block;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-slate-900);
margin-bottom: var(--spacing-1);
}
.form-input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-slate-300);
border-radius: 0.5rem;
font-size: var(--text-base);
outline: none;
transition: all 0.2s ease;
}
.form-input:focus {
border-color: var(--color-indigo-500);
box-shadow: 0 0 0 3px var(--color-indigo-200);
}
.form-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.remember-me {
display: flex;
align-items: center;
}
.remember-me input[type="checkbox"] {
width: 1rem;
height: 1rem;
border: 1px solid var(--color-slate-300);
border-radius: 0.25rem;
margin-right: var(--spacing-2);
accent-color: var(--color-indigo-600);
}
.remember-me label {
font-size: var(--text-sm);
color: var(--color-slate-600);
}
.forgot-password {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-indigo-600);
text-decoration: none;
transition: color 0.2s ease;
}
.forgot-password:hover {
color: var(--color-indigo-700);
}
.submit-button {
width: 100%;
background-color: var(--color-indigo-600);
color: var(--color-white);
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: var(--text-base);
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.submit-button:hover {
background-color: var(--color-indigo-700);
}
.submit-button:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-indigo-200), 0 0 0 4px var(--color-white);
}
.social-login {
margin-top: var(--spacing-8);
text-align: center;
}
.social-login-text {
color: var(--color-slate-400);
font-size: var(--text-sm);
}
.social-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-3);
margin-top: var(--spacing-4);
}
.social-button {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-slate-50);
border: 1px solid var(--color-slate-200);
border-radius: 0.5rem;
padding: var(--spacing-3);
cursor: pointer;
transition: background-color 0.2s ease;
}
.social-button:hover {
background-color: var(--color-slate-100);
}
.social-button img {
width: 1.25rem;
height: 1.25rem;
}
.signup-text {
margin-top: var(--spacing-8);
text-align: center;
font-size: var(--text-sm);
color: var(--color-slate-600);
}
.signup-link {
color: var(--color-indigo-600);
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.signup-link:hover {
color: var(--color-indigo-700);
}
@media (min-width: 640px) {
.login-section {
padding: 2rem 1.5rem;
}
}
@media (min-width: 1024px) {
.login-section {
padding: 2rem;
}
}
</style>
<section class="login-section">
<div class="login-container">
<div class="login-card">
<h1 class="login-title">Sign in to your business account</h1>
<p class="login-description">Access your dashboard, manage clients, and grow your business with our secure platform.</p>
<form class="login-form" action="#" method="POST" aria-label="Login form">
<div class="form-group">
<label for="email">Email address</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">
<label for="password">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required aria-required="true" class="form-input" placeholder="Enter your password">
</div>
<div class="form-footer">
<div class="remember-me">
<input id="remember-me" name="remember-me" type="checkbox" aria-checked="false">
<label for="remember-me">Remember me</label>
</div>
<a href="#" class="forgot-password">Forgot password?</a>
</div>
<button type="submit" class="submit-button" aria-label="Sign in to your account">Sign in</button>
</form>
<div class="social-login">
<span class="social-login-text">or sign in with</span>
<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" loading="lazy" width="20" height="20">
</button>
<button type="button" class="social-button" aria-label="Sign in with Facebook">
<img src="https://landinggo.com/assets/img/stock/login/facebook.svg" alt="Facebook" 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" loading="lazy" width="20" height="20">
</button>
</div>
</div>
<p class="signup-text">Don't have an account?
<a href="#" class="signup-link">Create one</a>
</p>
</div>
</div>
</section>
<!--
@type: Login
@industry: Business
@style: Modern
@category: UI Element, Page Section, Navigation
@framework: Tailwind
@license: Free
-->
<section class="min-h-screen flex items-center justify-center bg-slate-50 py-8 px-4 sm:px-6 lg:px-8 font-sans">
<div class="max-w-md w-full space-y-8">
<div class="bg-white rounded-xl shadow-lg border border-slate-200 p-8">
<h1 class="text-2xl font-bold text-slate-900 mb-2">Sign in to your business account</h1>
<p class="text-slate-600 mb-6 text-base">Access your dashboard, manage clients, and grow your business with our secure platform.</p>
<form class="space-y-6" action="#" method="POST" aria-label="Login form">
<div>
<label for="email" class="block text-sm font-medium text-slate-900 mb-1">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required aria-required="true" class="border border-slate-300 rounded-lg px-4 py-3 w-full focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition outline-none text-base" placeholder="[email protected]">
</div>
<div>
<label for="password" class="block text-sm font-medium text-slate-900 mb-1">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required aria-required="true" class="border border-slate-300 rounded-lg px-4 py-3 w-full focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition outline-none text-base" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded" aria-checked="false">
<label for="remember-me" class="ml-2 block text-sm text-slate-600">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-700 transition-colors">Forgot password?</a>
</div>
</div>
<button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition-colors text-base focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2 aria-label='Sign in to your account'">Sign in</button>
</form>
<div class="mt-8">
<div class="flex items-center justify-center">
<span class="text-slate-400 text-sm">or sign in with</span>
</div>
<div class="mt-4 grid grid-cols-3 gap-3">
<button type="button" class="flex justify-center items-center bg-slate-50 border border-slate-200 rounded-lg p-3 hover:bg-slate-100 transition" aria-label="Sign in with Google">
<img src="https://landinggo.com/assets/img/stock/login/google.svg" alt="Google" class="w-5 h-5" loading="lazy" width="20" height="20">
</button>
<button type="button" class="flex justify-center items-center bg-slate-50 border border-slate-200 rounded-lg p-3 hover:bg-slate-100 transition" aria-label="Sign in with Facebook">
<img src="https://landinggo.com/assets/img/stock/login/facebook.svg" alt="Facebook" class="w-5 h-5" loading="lazy" width="20" height="20">
</button>
<button type="button" class="flex justify-center items-center bg-slate-50 border border-slate-200 rounded-lg p-3 hover:bg-slate-100 transition" aria-label="Sign in with LinkedIn">
<img src="https://landinggo.com/assets/img/stock/login/linkedin.svg" alt="LinkedIn" class="w-5 h-5" loading="lazy" width="20" height="20">
</button>
</div>
</div>
<p class="mt-8 text-center text-sm text-slate-600">Don't have an account?
<a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 transition-colors">Create one</a>
</p>
</div>
</div>
</section>
