Login Business Modern

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