Premium Automotive Login Page with Animated SVG Illustration

Modern responsive automotive login page with animated SVG illustration, premium dark UI, password visibility toggle, and Tailwind CSS.

This tailwind example is contributed by JUGENDRA GANGWAR, on 11-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author JUGENDRA GANGWAR

Tailwind v3.4 337 1

Fork Fullscreen

<main class="min-h-[calc(100vh-136px)] flex items-center justify-center px-4 py-12 bg-[#161618] bg-noise">
  <div class="w-full max-w-4xl bg-[#F5F1EA] rounded-2xl shadow-2xl overflow-hidden flex flex-col md:flex-row">
    <div class="w-full md:w-1/2 p-8 sm:p-10">
      <h1 class="font-display font-700 text-4xl text-[#1C1C1E] leading-none">Welcome back</h1>
      <p class="text-sm mt-3 text-[#5b5b5f] mb-6">
        Sign in to track orders, book fittings, and manage your garage.
      </p>
      <form id="loginForm" class="flex flex-col gap-4" novalidate>
        <div>
          <div class="relative">
            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-[#9a9a9e]">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 6.5C3 5.67 3.67 5 4.5 5h15c.83 0 1.5.67 1.5 1.5v11c0 .83-.67 1.5-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5v-11Z" stroke="currentColor" stroke-width="1.6"/>
                <path d="m4 6.5 8 6.5 8-6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <input
              id="email"
              type="email"
              name="email"
              placeholder="you@example.com"
              required
              class="w-full rounded-lg border border-[#D9D5CC] bg-white py-2.5 pl-10 pr-3 text-sm text-[#1C1C1E] placeholder:text-[#B0ADA4] focus:outline-none focus:ring-2 focus:ring-[#FF6B35] focus:border-transparent transition"
            />
          </div>
        </div>
        <div>
          <div class="relative">
            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-[#9a9a9e]">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="5" y="10.5" width="14" height="9" rx="1.6" stroke="currentColor" stroke-width="1.6"/>
                <path d="M8 10.5V7.8a4 4 0 1 1 8 0v2.7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
              </svg>
            </span>
            <input
              id="password"
              type="password"
              name="password"
              placeholder="••••••••"
              required
              class="w-full rounded-lg border border-[#D9D5CC] bg-white py-2.5 pl-10 pr-10 text-sm text-[#1C1C1E] placeholder:text-[#B0ADA4] focus:outline-none focus:ring-2 focus:ring-[#FF6B35] focus:border-transparent transition"
            />
            <button
              type="button"
              id="togglePassword"
              aria-label="Show password"
              class="absolute right-3 top-1/2 -translate-y-1/2 text-[#9a9a9e] hover:text-[#1C1C1E] transition"
            >
              <svg id="eyeOpen" width="19" height="19" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.6"/>
              </svg>
              <svg id="eyeClosed" width="19" height="19" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="hidden">
                <path d="M3 3l18 18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                <path d="M10.6 5.2C11 5.1 11.5 5 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-3.4 4.3M6.6 6.6C4 8.3 2 12 2 12s3.6 7 10 7c1.4 0 2.6-.3 3.7-.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
              </svg>
            </button>
          </div>
        </div>
        <p id="errorMsg" class="hidden text-xs font-medium text-red-600 -mt-2"></p>
        <button
          id="submitBtn"
          type="submit"
          class="mt-1 bg-[#1C1C1E] text-white py-2.5 rounded-lg font-semibold text-sm tracking-wide hover:bg-[#FF6B35] hover:text-[#1C1C1E] active:scale-[0.98] transition disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Log In
        </button>
      </form>
      <div class="my-6 flex items-center gap-3">
        <div class="tread-divider flex-1"></div>
        <span class="text-[10px] font-bold tracking-widest text-[#A6A29A]">OR</span>
        <div class="tread-divider flex-1"></div>
      </div>
      <a href="/Forgot" class="block text-sm text-[#1f5070] hover:text-[#FF6B35] underline underline-offset-2 mb-6">
        Forgot password?
      </a>
      <div class="flex items-center justify-between border-t border-[#E4E0D6] pt-4">
        <p class="text-sm text-[#5b5b5f]">New around here?</p>
        <a href="/RegistrationForm">
          <button class="text-white bg-[#1C1C1E] rounded-lg py-2 px-4 text-sm font-semibold hover:bg-[#FF6B35] hover:text-[#1C1C1E] transition">
            Create account
          </button>
        </a>
      </div>
    </div>
    <div class="hidden md:flex w-1/2 relative bg-[#101012] items-center justify-center overflow-hidden">
      <div class="absolute inset-0 opacity-30 bg-noise"></div>
      <svg class="spin-slow" width="260" height="260" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="100" r="92" stroke="#2A2A2E" stroke-width="16"/>
        <circle cx="100" cy="100" r="92" stroke="#FF6B35" stroke-width="2" stroke-dasharray="4 10"/>
        <circle cx="100" cy="100" r="55" fill="#1C1C1E" stroke="#3a3a3d" stroke-width="2"/>
        <circle cx="100" cy="100" r="14" fill="#2A2A2E" stroke="#FF6B35" stroke-width="2"/>
        <g stroke="#3a3a3d" stroke-width="6" stroke-linecap="round">
          <line x1="100" y1="60" x2="100" y2="80"/>
          <line x1="100" y1="120" x2="100" y2="140"/>
          <line x1="60" y1="100" x2="80" y2="100"/>
          <line x1="120" y1="100" x2="140" y2="100"/>
          <line x1="71.7" y1="71.7" x2="84.9" y2="84.9"/>
          <line x1="115.1" y1="115.1" x2="128.3" y2="128.3"/>
          <line x1="71.7" y1="128.3" x2="84.9" y2="115.1"/>
          <line x1="115.1" y1="84.9" x2="128.3" y2="71.7"/>
        </g>
      </svg>
      <div class="absolute bottom-8 left-8 right-8 text-center">
        <p class="font-display font-600 text-white text-lg tracking-wide">Every mile starts with the right grip.</p>
        <p class="text-xs text-zinc-400 mt-1">Book a fitting in under 3 minutes.</p>
      </div>
    </div>

</div>
</main>
<footer class="bg-[#101012] border-t border-white/10">
  <div class="max-w-7xl mx-auto px-6 py-6 flex flex-col sm:flex-row items-center justify-between gap-3">
    <p class="text-xs text-zinc-500">© 2026 TreadWorks. All rights reserved.</p>
    <div class="flex items-center gap-5 text-xs text-zinc-500">
      <a href="#" class="hover:text-zinc-300 transition">Privacy</a>
      <a href="#" class="hover:text-zinc-300 transition">Terms</a>
      <a href="#" class="hover:text-zinc-300 transition">Contact</a>
    </div>
  </div>
</footer>
<script>
  const pwInput = document.getElementById('password');
  const toggleBtn = document.getElementById('togglePassword');
  const eyeOpen = document.getElementById('eyeOpen');
  const eyeClosed = document.getElementById('eyeClosed');
  toggleBtn.addEventListener('click', () => {
    const isPassword = pwInput.type === 'password';
    pwInput.type = isPassword ? 'text' : 'password';
    eyeOpen.classList.toggle('hidden', isPassword);
    eyeClosed.classList.toggle('hidden', !isPassword);
    toggleBtn.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
  });

</script>
</body>

Related Examples

Login Form with Icon

Prashant

4 years ago

18.8k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.8k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.5k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

15.9k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

3 years ago

12k