Home
Nicole Shalom
animation login form

animation login form

An animated login form enhances the user experience by making the interaction visually engaging and modern. Below is a breakdown of key animation techniques used in animated login forms, plus examples you can use or customize.

This tailwind example is contributed by Nicole Shalom, on 24-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Nicole Shalom

569

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Enterprise Auth Portal</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    }

:root {
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --secondary: #64748b;
      --success: #059669;
      --warning: #d97706;
      --error: #dc2626;
      --gray-50: #f8fafc;
      --gray-100: #f1f5f9;
      --gray-200: #e2e8f0;
      --gray-300: #cbd5e1;
      --gray-400: #94a3b8;
      --gray-500: #64748b;
      --gray-600: #475569;
      --gray-700: #334155;
      --gray-800: #1e293b;
      --gray-900: #0f172a;
      --white: #ffffff;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    }

body {
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--gray-700);
    }

.auth-container {
      width: 100%;
      max-width: 420px;
      background: var(--white);
      border-radius: 16px;
      box-shadow: var(--shadow-xl);
      overflow: hidden;
      animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

@keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

.auth-header {
      padding: 48px 32px 32px;
      text-align: center;
      background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
      border-bottom: 1px solid var(--gray-200);
    }

.company-logo {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      border-radius: 12px;
      margin: 0 auto 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      color: var(--white);
      box-shadow: var(--shadow-lg);
    }

.auth-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 8px;
      letter-spacing: -0.025em;
    }

.auth-subtitle {
      color: var(--gray-600);
      font-size: 16px;
      font-weight: 400;
    }

.form-tabs {
      display: flex;
      background: var(--gray-100);
      border-bottom: 1px solid var(--gray-200);
    }

.tab-button {
      flex: 1;
      padding: 16px 24px;
      background: none;
      border: none;
      font-size: 15px;
      font-weight: 600;
      color: var(--gray-500);
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

.tab-button.active {
      color: var(--primary);
      background: var(--white);
    }

.tab-button.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--primary);
    }

.tab-button:hover:not(.active) {
      color: var(--gray-700);
      background: var(--gray-50);
    }

.form-content {
      padding: 32px;
    }

.form-section {
      margin-bottom: 32px;
    }

.section-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 16px;
    }

.sso-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 24px;
    }

.sso-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 12px 16px;
      border: 1px solid var(--gray-300);
      border-radius: 8px;
      background: var(--white);
      color: var(--gray-700);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }

.sso-button:hover {
      border-color: var(--gray-400);
      background: var(--gray-50);
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

.sso-button:active {
      transform: translateY(0);
    }

.form-divider {
      display: flex;
      align-items: center;
      margin: 24px 0;
      color: var(--gray-500);
      font-size: 13px;
      font-weight: 500;
    }

.form-divider::before,
    .form-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--gray-300);
    }

.form-divider span {
      padding: 0 16px;
      background: var(--white);
    }

.form-group {
      margin-bottom: 24px;
    }

.form-label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--gray-700);
      margin-bottom: 8px;
    }

.form-input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid var(--gray-300);
      border-radius: 8px;
      font-size: 15px;
      background: var(--white);
      transition: all 0.2s ease;
      color: var(--gray-900);
    }

.form-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
    }

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

.form-input.error {
      border-color: var(--error);
      box-shadow: 0 0 0 3px rgb(220 38 38 / 0.1);
    }

.input-error {
      display: block;
      color: var(--error);
      font-size: 12px;
      margin-top: 6px;
      font-weight: 500;
    }

.form-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

.checkbox-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

.form-checkbox {
      width: 16px;
      height: 16px;
      border: 1px solid var(--gray-300);
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      background: var(--white);
    }

.form-checkbox.checked {
      background: var(--primary);
      border-color: var(--primary);
    }

.form-checkbox.checked::after {
      content: '✓';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--white);
      font-size: 10px;
      font-weight: bold;
    }

.checkbox-label {
      font-size: 14px;
      color: var(--gray-600);
      cursor: pointer;
      user-select: none;
    }

.forgot-link {
      color: var(--primary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
    }

.forgot-link:hover {
      text-decoration: underline;
    }

.form-button {
      width: 100%;
      padding: 14px 20px;
      background: var(--primary);
      color: var(--white);
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

.form-button:hover {
      background: var(--primary-dark);
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
    }

.form-button:active {
      transform: translateY(0);
    }

.form-button:disabled {
      background: var(--gray-300);
      color: var(--gray-500);
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

.form-button.loading {
      color: transparent;
    }

.form-button.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      border: 2px solid transparent;
      border-top: 2px solid var(--white);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

@keyframes spin {
      to { transform: rotate(360deg); }
    }

.security-info {
      background: var(--gray-50);
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      padding: 16px;
      margin-top: 24px;
    }

.security-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--gray-700);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

.security-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      font-size: 13px;
      color: var(--gray-600);
    }

.security-feature {
      display: flex;
      align-items: center;
      gap: 6px;
    }

.form-footer {
      padding: 24px 32px;
      background: var(--gray-50);
      border-top: 1px solid var(--gray-200);
      text-align: center;
    }

.footer-text {
      font-size: 13px;
      color: var(--gray-500);
      line-height: 1.6;
    }

.footer-links {
      margin-top: 12px;
      display: flex;
      justify-content: center;
      gap: 24px;
    }

.footer-link {
      color: var(--primary);
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
    }

.footer-link:hover {
      text-decoration: underline;
    }

.form-slide {
      display: none;
      animation: fadeIn 0.3s ease;
    }

.form-slide.active {
      display: block;
    }

@keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

.notification {
      position: fixed;
      top: 20px;
      right: 20px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      padding: 16px 20px;
      box-shadow: var(--shadow-xl);
      z-index: 1000;
      transform: translateX(400px);
      transition: transform 0.3s ease;
      max-width: 320px;
    }

.notification.show {
      transform: translateX(0);
    }

.notification.success {
      border-left: 4px solid var(--success);
    }

.notification.error {
      border-left: 4px solid var(--error);
    }

.notification.warning {
      border-left: 4px solid var(--warning);
    }

.notification-content {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

.notification-icon {
      font-size: 18px;
      flex-shrink: 0;
    }

.notification-text {
      font-size: 14px;
      color: var(--gray-700);
      font-weight: 500;
    }

/* Responsive Design */
    @media (max-width: 480px) {
      .auth-container {
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

.form-content {
        flex: 1;
        padding: 24px;
      }

.auth-header {
        padding: 32px 24px 24px;
      }

.sso-buttons {
        grid-template-columns: 1fr;
      }

.form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

.notification {
        top: 10px;
        right: 10px;
        left: 10px;
        transform: translateY(-100px);
        max-width: none;
      }

.notification.show {
        transform: translateY(0);
      }
    }

/* Password Strength Indicator */
    .password-strength {
      margin-top: 8px;
    }

.strength-bar {
      height: 4px;
      background: var(--gray-200);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 8px;
    }

.strength-fill {
      height: 100%;
      transition: all 0.3s ease;
      width: 0%;
    }

.strength-weak { background: var(--error); width: 25%; }
    .strength-fair { background: var(--warning); width: 50%; }
    .strength-good { background: var(--success); width: 75%; }
    .strength-strong { background: var(--primary); width: 100%; }

.strength-text {
      font-size: 12px;
      font-weight: 500;
    }

.strength-weak-text { color: var(--error); }
    .strength-fair-text { color: var(--warning); }
    .strength-good-text { color: var(--success); }
    .strength-strong-text { color: var(--primary); }
  </style>
</head>
<body>
  <div class="auth-container">
    
    <div class="auth-header">
      <div class="company-logo">C</div>
      <h1 class="auth-title" id="authTitle">Welcome to CoreAuth</h1>
      <p class="auth-subtitle" id="authSubtitle">Secure access to your enterprise account</p>
    </div>

<div class="form-tabs">
      <button class="tab-button active" onclick="switchForm('login')">Sign In</button>
      <button class="tab-button" onclick="switchForm('signup')">Create Account</button>
    </div>

<div id="loginForm" class="form-slide active">
      <div class="form-content">
        
        <div class="form-section">
          <div class="section-title">Single Sign-On</div>
          <div class="sso-buttons">
            <button class="sso-button" onclick="ssoLogin('google')">
              <svg width="18" height="18" viewBox="0 0 24 24">
                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
              </svg>
              Google
            </button>
            <button class="sso-button" onclick="ssoLogin('microsoft')">
              <svg width="18" height="18" viewBox="0 0 24 24">
                <path fill="#f25022" d="M1 1h10v10H1z"/>
                <path fill="#00a4ef" d="M13 1h10v10H13z"/>
                <path fill="#7fba00" d="M1 13h10v10H1z"/>
                <path fill="#ffb900" d="M13 13h10v10H13z"/>
              </svg>
              Microsoft
            </button>
          </div>
        </div>

<div class="form-divider">
          <span>or continue with email</span>
        </div>

<form onsubmit="handleLogin(event)" id="loginFormElement">
          <div class="form-group">
            <label class="form-label">Email Address</label>
            <input type="email" class="form-input" placeholder="name@company.com" required id="loginEmail" />
            <span class="input-error" id="loginEmailError"></span>
          </div>

<div class="form-group">
            <label class="form-label">Password</label>
            <input type="password" class="form-input" placeholder="Enter your password" required id="loginPassword" />
            <span class="input-error" id="loginPasswordError"></span>
          </div>

<div class="form-options">
            <div class="checkbox-group">
              <div class="form-checkbox" onclick="toggleCheckbox(this)"></div>
              <span class="checkbox-label">Keep me signed in</span>
            </div>
            <a href="#" class="forgot-link" onclick="showForgotPassword()">Forgot password?</a>
          </div>

<div class="security-info">
          <div class="security-title">
            🔒 Your data is protected
          </div>
          <div class="security-features">
            <div class="security-feature">
              <span>✓</span> 256-bit SSL encryption
            </div>
            <div class="security-feature">
              <span>✓</span> SOC 2 Type II certified
            </div>
            <div class="security-feature">
              <span>✓</span> GDPR compliant
            </div>
            <div class="security-feature">
              <span>✓</span> Multi-factor authentication
            </div>
          </div>
        </div>
      </div>
    </div>

<div id="signupForm" class="form-slide">
      <div class="form-content">
        
        <div class="form-section">
          <div class="section-title">Quick Setup with SSO</div>
          <div class="sso-buttons">
            <button class="sso-button" onclick="ssoLogin('google')">
              <svg width="18" height="18" viewBox="0 0 24 24">
                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
              </svg>
              Google
            </button>
            <button class="sso-button" onclick="ssoLogin('microsoft')">
              <svg width="18" height="18" viewBox="0 0 24 24">
                <path fill="#f25022" d="M1 1h10v10H1z"/>
                <path fill="#00a4ef" d="M13 1h10v10H13z"/>
                <path fill="#7fba00" d="M1 13h10v10H1z"/>
                <path fill="#ffb900" d="M13 13h10v10H13z"/>
              </svg>
              Microsoft
            </button>
          </div>
        </div>

<div class="form-divider">
          <span>or create account manually</span>
        </div>

<div class="form-group">
            <label class="form-label">Work Email</label>
            <input type="email" class="form-input" placeholder="john@company.com" required id="signupEmail" />
            <span class="input-error" id="signupEmailError"></span>
          </div>

<div class="form-group">
            <label class="form-label">Password</label>
            <input type="password" class="form-input" placeholder="Create a strong password" required id="signupPassword" oninput="checkPasswordStrength(this.value)" />
            <div class="password-strength" id="passwordStrength" style="display: none;">
              <div class="strength-bar">
                <div class="strength-fill" id="strengthFill"></div>
              </div>
              <div class="strength-text" id="strengthText"></div>
            </div>
            <span class="input-error" id="signupPasswordError"></span>
          </div>

<div class="form-options">
            <div class="checkbox-group">
              <div class="form-checkbox" onclick="toggleCheckbox(this)" id="termsCheckbox"></div>
              <span class="checkbox-label">I agree to the <a href="#" class="forgot-link">Terms of Service</a> and <a href="#" class="forgot-link">Privacy Policy</a></span>
            </div>
          </div>

<button type="submit" class="form-button" id="signupBtn" disabled>
            Create Account
          </button>
        </form>
      </div>
    </div>

<div class="form-footer">
      <p class="footer-text">
        Your account is protected by enterprise-grade security measures including end-to-end encryption and regular security audits.
      </p>
      <div class="footer-links">
        <a href="#" class="footer-link">Help Center</a>
        <a href="#" class="footer-link">Contact Support</a>
        <a href="#" class="footer-link">Security</a>
      </div>
    </div>
  </div>

<div class="notification" id="notification">
    <div class="notification-content">
      <div class="notification-icon" id="notificationIcon"></div>
      <div class="notification-text" id="notificationText"></div>
    </div>
  </div>

// Update active tab
      tabButtons.forEach(btn => btn.classList.remove('active'));
      event.target.classList.add('active');

// Switch forms
      if (formType === 'login') {
        loginForm.classList.add('active');
        signupForm.classList.remove('active');
        title.textContent = 'Welcome to CoreAuth';
        subtitle.textContent = 'Secure access to your enterprise account';
      } else {
        signupForm.classList.add('active');
        loginForm.classList.remove('active');
        title.textContent = 'Join CoreAuth';
        subtitle.textContent = 'Create your secure enterprise account';
      }
    }

// Checkbox toggle functionality
    function toggleCheckbox(checkbox) {
      checkbox.classList.toggle('checked');
      
      // Enable/disable signup button based on terms acceptance
      if (checkbox.id === 'termsCheckbox') {
        const signupBtn = document.getElementById('signupBtn');
        signupBtn.disabled = !checkbox.classList.contains('checked');
      }
    }

// Password strength checker
    function checkPasswordStrength(password) {
      const strengthContainer = document.getElementById('passwordStrength');
      const strengthFill = document.getElementById('strengthFill');
      const strengthText = document.getElementById('strengthText');

if (password.length === 0) {
        strengthContainer.style.display = 'none';
        return;
      }

strengthContainer.style.display = 'block';

let strength = 0;
      let feedback = '';

// Length check
      if (password.length >= 8) strength++;
      if (password.length >= 12) strength++;

// Character variety checks
      if (/[a-z]/.test(password)) strength++;
      if (/[A-Z]/.test(password)) strength++;
      if (/[0-9]/.test(password)) strength++;
      if (/[^A-Za-z0-9]/.test(password)) strength++;

// Remove previous strength classes
      strengthFill.className = 'strength-fill';
      strengthText.className = 'strength-text';

if (strength <= 2) {
        strengthFill.classList.add('strength-weak');
        strengthText.classList.add('strength-weak-text');
        feedback = 'Weak password';
      } else if (strength <= 3) {
        strengthFill.classList.add('strength-fair');
        strengthText.classList.add('strength-fair-text');
        feedback = 'Fair password';
      } else if (strength <= 4) {
        strengthFill.

Related Examples

Waitlist signup form

Author:
Anonymous

1 year ago

3.9k
Contact us form template with fabform

Author:
Ho O

6 months ago

831
form text

Author:
Severino Victtorino

3 months ago

370
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

1 year ago

7.6k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.9k
Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.2k
Appointment booking form

Author:
Leif99

2 years ago

17.3k
File Upload

Author:
Rajesh Maheshwari

5 months ago

627
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

9 months ago

1.8k
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

1 month ago

177
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

3 months ago

695
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
SANJAY SINGH GARIYA

1 month ago

249

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components