Home
shrenik khule
Login Form

Login Form

A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

This tailwind example is contributed by shrenik khule, on 07-Feb-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in,Transitions

Card Login Form Animation

Author shrenik khule

Fork Fullscreen

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nexus — Sign In</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <style>
      * {
        font-family: "Inter", sans-serif;
      }

/* ── keyframes ── */
      @keyframes orbit {
        from {
          transform: rotate(0deg) translateX(var(--radius)) rotate(0deg);
        }
        to {
          transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg);
        }
      }
      @keyframes orbit-reverse {
        from {
          transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg);
        }
        to {
          transform: rotate(0deg) translateX(var(--radius)) rotate(0deg);
        }
      }
      @keyframes morph {
        0%,
        100% {
          border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
          transform: rotate(0deg);
        }
        34% {
          border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
          transform: rotate(90deg);
        }
        67% {
          border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
          transform: rotate(180deg);
        }
      }
      @keyframes gradient-x {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      @keyframes slide-up {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes fade-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes scale-in {
        from {
          opacity: 0;
          transform: scale(0.85);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-14px);
        }
      }
      @keyframes pulse-soft {
        0%,
        100% {
          opacity: 0.45;
          transform: scale(1);
        }
        50% {
          opacity: 0.7;
          transform: scale(1.08);
        }
      }
      @keyframes dash {
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes ticker {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      @keyframes ripple {
        0% {
          transform: scale(1);
          opacity: 0.35;
        }
        100% {
          transform: scale(3.5);
          opacity: 0;
        }
      }
      @keyframes check-draw {
        from {
          stroke-dashoffset: 30;
        }
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes shake {
        0%,
        100% {
          transform: translateX(0);
        }
        20%,
        60% {
          transform: translateX(-6px);
        }
        40%,
        80% {
          transform: translateX(6px);
        }
      }
      @keyframes confetti-fall {
        0% {
          transform: translateY(-10px) rotate(0deg);
          opacity: 1;
        }
        100% {
          transform: translateY(60px) rotate(360deg);
          opacity: 0;
        }
      }
      @keyframes line-grow {
        from {
          width: 0;
        }
        to {
          width: 100%;
        }
      }
      @keyframes glow-pulse {
        0%,
        100% {
          box-shadow: 0 0 20px rgba(251, 146, 60, 0.15);
        }
        50% {
          box-shadow: 0 0 40px rgba(251, 146, 60, 0.25);
        }
      }

.animate-orbit {
        animation: orbit var(--dur, 20s) linear infinite;
      }
      .animate-orbit-reverse {
        animation: orbit-reverse var(--dur, 25s) linear infinite;
      }
      .animate-morph {
        animation: morph 12s ease-in-out infinite;
      }
      .animate-gradient-x {
        background-size: 200% auto;
        animation: gradient-x 6s linear infinite;
      }
      .animate-slide-up {
        animation: slide-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .animate-fade-in {
        animation: fade-in 0.8s ease both;
      }
      .animate-scale-in {
        animation: scale-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .animate-float {
        animation: float 5s ease-in-out infinite;
      }
      .animate-pulse-soft {
        animation: pulse-soft 4s ease-in-out infinite;
      }
      .animate-ticker {
        animation: ticker 30s linear infinite;
      }
      .animate-glow-pulse {
        animation: glow-pulse 3s ease-in-out infinite;
      }

.delay-100 {
        animation-delay: 0.1s;
      }
      .delay-200 {
        animation-delay: 0.2s;
      }
      .delay-300 {
        animation-delay: 0.3s;
      }
      .delay-400 {
        animation-delay: 0.4s;
      }
      .delay-500 {
        animation-delay: 0.5s;
      }
      .delay-600 {
        animation-delay: 0.6s;
      }
      .delay-700 {
        animation-delay: 0.7s;
      }

/* glass */
      .glass {
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
      }

/* focus ring utility */
      .focus-ring:focus-within {
        box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.25);
      }

/* password strength meter */
      .strength-bar {
        transition:
          width 0.4s ease,
          background 0.4s ease;
      }

/* scrollbar */
      ::-webkit-scrollbar {
        width: 5px;
      }
      ::-webkit-scrollbar-thumb {
        background: #fdba74;
        border-radius: 10px;
      }

/* tooltip arrow */
      .tooltip-arrow::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: white;
      }
    </style>
  </head>
  <body
    class="min-h-screen select-none"
    style="
      background: linear-gradient(
        140deg,
        #fffbf5 0%,
        #fff4e6 30%,
        #fff0f6 60%,
        #f3f0ff 100%
      );
    "
  >
    
    
    
    <div
      class="fixed inset-0 pointer-events-none overflow-hidden"
      aria-hidden="true"
    >
      
      <div
        class="absolute w-[500px] h-[500px] -top-40 -left-40 bg-gradient-to-br from-amber-100/60 to-orange-100/60 animate-morph animate-pulse-soft"
      ></div>
      <div
        class="absolute w-[420px] h-[420px] -bottom-32 -right-32 bg-gradient-to-br from-rose-100/50 to-pink-100/50 animate-morph animate-pulse-soft"
        style="animation-delay: 3s"
      ></div>
      <div
        class="absolute w-[350px] h-[350px] top-1/3 left-2/3 bg-gradient-to-br from-violet-100/40 to-indigo-100/30 animate-morph animate-pulse-soft"
        style="animation-delay: 6s"
      ></div>

<div class="absolute top-[18%] left-[12%]">
        <div class="relative w-0 h-0">
          <div
            class="absolute animate-orbit"
            style="--radius: 90px; --dur: 18s"
          >
            <span class="block w-3 h-3 rounded-full bg-orange-300/50"></span>
          </div>
          <div
            class="absolute animate-orbit-reverse"
            style="--radius: 60px; --dur: 14s"
          >
            <span class="block w-2 h-2 rounded-full bg-amber-400/40"></span>
          </div>
        </div>
      </div>

<div class="absolute bottom-[22%] right-[10%]">
        <div class="relative w-0 h-0">
          <div
            class="absolute animate-orbit"
            style="--radius: 70px; --dur: 22s"
          >
            <span class="block w-2.5 h-2.5 rounded-full bg-pink-300/50"></span>
          </div>
          <div
            class="absolute animate-orbit-reverse"
            style="--radius: 100px; --dur: 28s"
          >
            <span class="block w-2 h-2 rounded-full bg-violet-300/40"></span>
          </div>
        </div>
      </div>

<svg class="absolute inset-0 w-full h-full opacity-[.035]">
        <defs>
          <pattern
            id="grid"
            width="40"
            height="40"
            patternUnits="userSpaceOnUse"
          >
            <path
              d="M 40 0 L 0 0 0 40"
              fill="none"
              stroke="#fb923c"
              stroke-width=".5"
            />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>

<div
        class="absolute top-[10%] right-[30%] animate-float"
        style="animation-delay: 1s"
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <rect
            x="4"
            y="4"
            width="16"
            height="16"
            rx="3"
            stroke="#f9a8d4"
            stroke-width="1.5"
            opacity=".5"
            transform="rotate(20 12 12)"
          />
        </svg>
      </div>
      <div
        class="absolute top-[55%] left-[6%] animate-float"
        style="animation-delay: 2.5s"
      >
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <circle
            cx="10"
            cy="10"
            r="7"
            stroke="#c4b5fd"
            stroke-width="1.5"
            opacity=".4"
          />
        </svg>
      </div>
      <div
        class="absolute bottom-[12%] left-[35%] animate-float"
        style="animation-delay: 0.8s"
      >
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
          <polygon
            points="9,1 17,14 1,14"
            stroke="#fdba74"
            stroke-width="1.5"
            opacity=".4"
          />
        </svg>
      </div>
    </div>

<div
      class="min-h-screen flex items-center justify-center px-4 py-16 relative z-10"
    >
      <div
        class="w-full max-w-5xl flex rounded-[2rem] overflow-hidden shadow-2xl shadow-orange-200/40 animate-scale-in"
      >
        
        <div
          class="hidden lg:flex lg:w-[45%] relative overflow-hidden bg-gradient-to-br from-orange-400 via-amber-400 to-yellow-400 animate-gradient-x p-10 flex-col justify-between"
        >
          
          <div
            class="absolute -top-16 -right-16 w-56 h-56 rounded-full border border-white/20 animate-pulse-soft"
          ></div>
          <div
            class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full border border-white/15 animate-pulse-soft"
            style="animation-delay: 2s"
          ></div>
          <div
            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72 h-72 rounded-full bg-white/5"
          ></div>

<div class="relative z-10 animate-slide-up">
            <div class="flex items-center gap-3 mb-1">
              <div
                class="w-10 h-10 rounded-xl bg-white/25 backdrop-blur flex items-center justify-center"
              >
                <svg
                  class="w-6 h-6 text-white"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M13 10V3L4 14h7v7l9-11h-7z"
                  />
                </svg>
              </div>
              <span class="text-white text-xl font-extrabold tracking-tight"
                >login</span
              >
            </div>
          </div>

<div
            class="relative z-10 flex-1 flex items-center justify-center my-8"
          >
            <div class="relative">
              
              <div
                class="w-52 h-52 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center animate-float"
              >
                <div
                  class="w-40 h-40 rounded-full bg-white/20 flex items-center justify-center"
                >
                  <svg
                    class="w-20 h-20 text-white/90"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                    />
                  </svg>
                </div>
              </div>
              
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="animate-orbit" style="--radius: 120px; --dur: 16s">
                  <div
                    class="w-10 h-10 rounded-xl bg-white/30 backdrop-blur flex items-center justify-center shadow-lg"
                  >
                    <span class="text-lg">🚀</span>
                  </div>
                </div>
              </div>
              <div class="absolute inset-0 flex items-center justify-center">
                <div
                  class="animate-orbit-reverse"
                  style="--radius: 120px; --dur: 20s"
                >
                  <div
                    class="w-10 h-10 rounded-xl bg-white/30 backdrop-blur flex items-center justify-center shadow-lg"
                  >
                    <span class="text-lg">🔐</span>
                  </div>
                </div>
              </div>
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="animate-orbit" style="--radius: 120px; --dur: 24s">
                  <div
                    class="w-10 h-10 rounded-xl bg-white/30 backdrop-blur flex items-center justify-center shadow-lg"
                  >
                    <span class="text-lg">⚡</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

<div class="relative z-10 animate-slide-up delay-400">
            <div
              class="bg-white/15 backdrop-blur-md rounded-2xl p-5 border border-white/20"
            >
              <div class="flex items-center gap-1 mb-2">
                <svg
                  class="w-4 h-4 text-yellow-200"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  />
                </svg>
                <svg
                  class="w-4 h-4 text-yellow-200"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  />
                </svg>
                <svg
                  class="w-4 h-4 text-yellow-200"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  />
                </svg>
                <svg
                  class="w-4 h-4 text-yellow-200"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  />
                </svg>
                <svg
                  class="w-4 h-4 text-yellow-200"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  />
                </svg>
              </div>
              <p class="text-white/90 text-sm leading-relaxed font-medium">
                "Nexus transformed our workflow completely. The security
                features are enterprise-grade and the UI is incredibly
                intuitive."
              </p>
              <div class="flex items-center gap-3 mt-3">
                <div
                  class="w-8 h-8 rounded-full bg-white/30 flex items-center justify-center text-xs font-bold text-white"
                >
                  SJ
                </div>
                <div>
                  <p class="text-white text-xs font-semibold">Sarah Johnson</p>
                  <p class="text-white/60 text-xs">CTO, TechCorp</p>
                </div>
              </div>
            </div>
          </div>
        </div>

<div
          class="w-full lg:w-[55%] glass border border-white/50 p-8 sm:p-12 flex flex-col justify-center relative overflow-hidden animate-glow-pulse"
        >
          
          <div
            class="flex lg:hidden items-center gap-2.5 mb-8 animate-slide-up"
          >
            <div
              class="w-9 h-9 rounded-xl bg-gradient-to-br from-orange-400 to-amber-400 flex items-center justify-center"
            >
              <svg
                class="w-5 h-5 text-white"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M13 10V3L4 14h7v7l9-11h-7z"
                />
              </svg>
            </div>
            <span
              class="text-lg font-extrabold bg-gradient-to-r from-orange-500 to-amber-500 bg-clip-text text-transparent"
              >Nexus</span
            >
          </div>

<div class="mb-8 animate-slide-up delay-100">
            <h2
              class="text-2xl sm:text-3xl font-extrabold text-amber-900 tracking-tight"
            >
              Sign in to your account
            </h2>
            <p class="text-amber-600/70 mt-2 text-sm">
              Enter your credentials to access your dashboard
            </p>
          </div>

<form id="loginForm" class="space-y-5" novalidate>
            
            <div class="animate-slide-up delay-200">
              <label
                class="text-xs font-semibold text-amber-700 uppercase tracking-wider mb-1.5 block"
                >Email</label
              >
              <div
                class="relative focus-ring rounded-xl transition-shadow duration-300"
              >
                <span
                  class="absolute left-4 top-1/2 -translate-y-1/2 text-amber-400"
                >
                  <svg
                    class="w-[18px] h-[18px]"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
                    />
                  </svg>
                </span>
                <input
                  id="emailInput"
                  type="email"
                  placeholder="you@company.com"
                  class="w-full pl-11 pr-11 py-3.5 rounded-xl bg-white/70 border-2 border-orange-100 focus:border-orange-400 focus:bg-white outline-none text-amber-900 placeholder-amber-300 text-sm font-medium transition-all duration-300"
                  autocomplete="email"
                />
                
                <span
                  id="emailCheck"
                  class="absolute right-3.5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-300"
                >
                  <svg
                    class="w-5 h-5 text-emerald-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    stroke-width="2.5"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M5 13l4 4L19 7"
                      style="
                        stroke-dasharray: 30;
                        stroke-dashoffset: 30;
                        animation: check-draw 0.4s ease forwards;
                      "
                    />
                  </svg>
                </span>
              </div>
              <p id="emailError" class="text-xs text-rose-400 mt-1 ml-1 hidden">
                Please enter a valid email address
              </p>
            </div>

<div class="animate-slide-up delay-300">
              <div class="flex justify-between items-center mb-1.5">
                <label
                  class="text-xs font-semibold text-amber-700 uppercase tracking-wider"
                  >Password</label
                >
                <a
                  href="#"
                  class="text-xs font-semibold text-orange-500 hover:text-orange-600 transition-colors relative group"
                >
                  Forgot?
                  <span
                    class="absolute -bottom-0.5 left-0 w-0 h-px bg-orange-400 group-hover:w-full transition-all duration-300"
                  ></span>
                </a>
              </div>
              <div
                class="relative focus-ring rounded-xl transition-shadow duration-300"
              >
                <span
                  class="absolute left-4 top-1/2 -translate-y-1/2 text-amber-400"
                >
                  <svg
                    class="w-[18px] h-[18px]"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                    />
                  </svg>
                </span>
                <input
                  id="passInput"
                  type="password"
                  placeholder="••••••••"
                  class="w-full pl-11 pr-11 py-3.5 rounded-xl bg-white/70 border-2 border-orange-100 focus:border-orange-400 focus:bg-white outline-none text-amber-900 placeholder-amber-300 text-sm font-medium transition-all duration-300"
                  autocomplete="current-password"
                />
                <button
                  type="button"
                  id="togglePass"
                  class="absolute right-3.5 top-1/2 -translate-y-1/2 text-amber-400 hover:text-orange-500 transition-colors"
                >
                  <svg
                    id="eyeOpen"
                    class="w-5 h-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                    />
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                    />
                  </svg>
                  <svg
                    id="eyeClosed"
                    class="w-5 h-5 hidden"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                    />
                  </svg>
                </button>
              </div>
              
              <div class="flex gap-1.5 mt-2.5">
                <div
                  class="h-1 rounded-full flex-1 bg-orange-100 overflow-hidden"
                >
                  <div
                    id="str1"
                    class="h-full strength-bar rounded-full w-0"
                  ></div>
                </div>
                <div
                  class="h-1 rounded-full flex-1 bg-orange-100 overflow-hidden"
                >
                  <div
                    id="str2"
                    class="h-full strength-bar rounded-full w-0"
                  ></div>
                </div>
                <div
                  class="h-1 rounded-full flex-1 bg-orange-100 overflow-hidden"
                >
                  <div
                    id="str3"
                    class="h-full strength-bar rounded-full w-0"
                  ></div>
                </div>
                <div
                  class="h-1 rounded-full flex-1 bg-orange-100 overflow-hidden"
                >
                  <div
                    id="str4"
                    class="h-full strength-bar rounded-full w-0"
                  ></div>
                </div>
              </div>
              <p
                id="strLabel"
                class="text-xs mt-1 ml-0.5 text-amber-400 transition-colors duration-300"
              >
                &nbsp;
              </p>
            </div>

<div
              class="flex items-center justify-between animate-fade-in delay-400"
            >
              <label class="flex items-center gap-2.5 cursor-pointer group">
                <div class="relative">
                  <input type="checkbox" class="sr-only peer" checked />
                  <div
                    class="w-9 h-5 rounded-full bg-orange-200 peer-checked:bg-gradient-to-r peer-checked:from-orange-400 peer-checked:to-amber-400 transition-all duration-300"
                  ></div>
                  <div
                    class="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow-sm peer-checked:translate-x-4 transition-transform duration-300"
                  ></div>
                </div>
                <span class="text-sm text-amber-700 font-medium"
                  >Remember me</span
                >
              </label>
            </div>

<div class="animate-slide-up delay-500 pt-1">
              <button
                type="submit"
                id="submitBtn"
                class="relative w-full py-4 rounded-xl bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500 animate-gradient-x text-white font-bold text-sm tracking-wide shadow-lg shadow-orange-200/60 hover:shadow-xl hover:shadow-orange-300/60 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300 overflow-hidden group disabled:opacity-60 disabled:cursor-not-allowed"
              >
                
                <span
                  id="btnText"
                  class="flex items-center justify-center gap-2"
                >
                  Sign In
                  <svg
                    class="w-4 h-4 group-hover:translate-x-1 transition-transform"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2.5"
                      d="M13 7l5 5m0 0l-5 5m5-5H6"
                    />
                  </svg>
                </span>
                
                <span
                  id="btnLoading"
                  class="hidden absolute inset-0 items-center justify-center"
                >
                  <svg
                    class="w-5 h-5 animate-spin"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="white"
                      stroke-width="3"
                      opacity=".3"
                    />
                    <path
                      d="M4 12a8 8 0 018-8"
                      stroke="white"
                      stroke-width="3"
                      stroke-linecap="round"
                    />
                  </svg>
                </span>
                
                <span
                  id="btnSuccess"
                  class="hidden absolute inset-0 items-center justify-center"
                >
                  <svg
                    class="w-6 h-6 text-white"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    stroke-width="3"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M5 13l4 4L19 7"
                      style="
                        stroke-dasharray: 30;
                        stroke-dashoffset: 30;
                        animation: check-draw 0.5s ease 0.2s forwards;
                      "
                    />
                  </svg>
                </span>
                
                <div
                  id="btnRipple"
                  class="absolute w-6 h-6 rounded-full bg-white/40 hidden"
                  style="animation: ripple 0.6s ease-out"
                ></div>
              </button>
            </div>
          </form>

<div class="flex items-center gap-4 my-6 animate-fade-in delay-600">
            <div
              class="flex-1 h-px bg-gradient-to-r from-transparent via-orange-200 to-transparent"
            ></div>
            <span
              class="text-[11px] text-amber-400 font-semibold tracking-widest uppercase"
              >or</span
            >
            <div
              class="flex-1 h-px bg-gradient-to-r from-transparent via-orange-200 to-transparent"
            ></div>
          </div>

<div class="grid grid-cols-3 gap-3 animate-slide-up delay-600">
            <button
              class="flex items-center justify-center gap-2 py-3 rounded-xl bg-white/70 border border-orange-100 hover:border-orange-300 hover:bg-orange-50/80 hover:-translate-y-0.5 transition-all duration-300 group"
            >
              <svg class="w-5 h-5" viewBox="0 0 24 24">
                <path
                  fill="#EA4335"
                  d="M5.266 9.765C6.199 6.939 8.854 4.909 12 4.909c1.691 0 3.218.6 4.418 1.582L19.91 3C17.782 1.145 15.055 0 12 0 7.27 0 3.198 2.698 1.24 6.65l4.026 3.115z"
                />
                <path
                  fill="#34A853"
                  d="M16.041 18.013A7.461 7.461 0 0112 19.091c-3.134 0-5.781-2.014-6.723-4.823l-4.04 3.067C3.193 21.294 7.265 24 12 24c2.933 0 5.735-1.043 7.834-3l-3.793-2.987z"
                />
                <path
                  fill="#4A90D9"
                  d="M19.834 21c2.195-2.048 3.62-5.097 3.62-9 0-.71-.109-1.473-.273-2.182H12v4.637h6.436c-.317 1.559-1.17 2.766-2.395 3.558L19.834 21z"
                />
                <path
                  fill="#FBBC05"
                  d="M5.277 14.268A7.12 7.12 0 014.909 12c0-.782.125-1.533.357-2.235L1.24 6.65A11.934 11.934 0 000 12c0 1.92.445 3.73 1.237 5.335l4.04-3.067z"
                />
              </svg>
              <span
                class="text-xs font-semibold text-amber-700 hidden sm:inline"
                >Google</span
              >
            </button>
            <button
              class="flex items-center justify-center gap-2 py-3 rounded-xl bg-white/70 border border-orange-100 hover:border-orange-300 hover:bg-orange-50/80 hover:-translate-y-0.5 transition-all duration-300 group"
            >
              <svg class="w-5 h-5" viewBox="0 0 24 24">
                <path
                  fill="#000"
                  d="M16.365 1.43c0 1.14-.493 2.27-1.177 3.08-.744.9-1.99 1.57-2.987 1.57-.18 0-.36-.02-.53-.06.02-.18.04-.39.04-.56 0-1.12.535-2.22 1.235-3.03.76-.87 2.04-1.56 3.02-1.57.03.18.05.37.05.55h-.001zM20.498 17.58c-.32.72-.473 1.04-.884 1.68-.573.9-1.38 2.02-2.38 2.03-.89.01-1.12-.58-2.33-.57-1.21.01-1.46.58-2.35.57-1-.01-1.76-1.03-2.33-1.93-1.6-2.52-1.77-5.49-.78-7.07.7-1.11 1.83-1.77 2.89-1.77 1.08 0 1.76.58 2.65.58.86 0 1.39-.58 2.63-.58.91 0 1.91.49 2.6 1.34-2.29 1.25-1.92 4.52.3 5.39v.01z"
                />
              </svg>
              <span
                class="text-xs font-semibold text-amber-700 hidden sm:inline"
                >Apple</span
              >
            </button>
            <button
              class="flex items-center justify-center gap-2 py-3 rounded-xl bg-white/70 border border-orange-100 hover:border-orange-300 hover:bg-orange-50/80 hover:-translate-y-0.5 transition-all duration-300 group"
            >
              <svg class="w-5 h-5" viewBox="0 0 24 24">
                <path
                  fill="#0078d4"
                  d="M0 0h11.5v11.5H0zM12.5 0H24v11.5H12.5zM0 12.5h11.5V24H0zM12.5 12.5H24V24H12.5z"
                />
              </svg>
              <span
                class="text-xs font-semibold text-amber-700 hidden sm:inline"
                >Microsoft</span
              >
            </button>
          </div>

<p
            class="text-center text-sm text-amber-600 mt-8 animate-fade-in delay-700"
          >
            New here?
            <a
              href="#"
              class="font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent relative group"
            >
              Create an account
              <span
                class="absolute -bottom-0.5 left-0 w-0 h-px bg-gradient-to-r from-orange-400 to-rose-400 group-hover:w-full transition-all duration-300"
              ></span>
            </a>
          </p>

<div
            id="confettiContainer"
            class="absolute inset-0 pointer-events-none overflow-hidden"
          ></div>
        </div>
      </div>
    </div>

<script>
      // ── Toggle password visibility ──
      const passInput = document.getElementById("passInput");
      const togglePass = document.getElementById("togglePass");
      const eyeOpen = document.getElementById("eyeOpen");
      const eyeClosed = document.getElementById("eyeClosed");

togglePass.addEventListener("click", () => {
        const isPassword = passInput.type === "password";
        passInput.type = isPassword ? "text" : "password";
        eyeOpen.classList.toggle("hidden", isPassword);
        eyeClosed.classList.toggle("hidden", !isPassword);
      });

// ── Email live validation ──
      const emailInput = document.getElementById("emailInput");
      const emailCheck = document.getElementById("emailCheck");
      const emailError = document.getElementById("emailError");
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

emailInput.addEventListener("input", () => {
        const valid = emailRegex.test(emailInput.value);
        emailCheck.style.opacity = valid ? "1" : "0";
        emailError.classList.toggle("hidden", valid || emailInput.value === "");
        emailInput.classList.toggle(
          "border-rose-300",
          !valid && emailInput.value !== "",
        );
        emailInput.classList.toggle("border-emerald-300", valid);
      });

// ── Password strength meter ──
      const str1 = document.getElementById("str1");
      const str2 = document.getElementById("str2");
      const str3 = document.getElementById("str3");
      const str4 = document.getElementById("str4");
      const strLabel = document.getElementById("strLabel");
      const bars = [str1, str2, str3, str4];
      const colors = [
        "bg-rose-400",
        "bg-orange-400",
        "bg-amber-400",
        "bg-emerald-400",
      ];
      const labels = ["", "Weak", "Fair", "Good", "Strong 💪"];
      const labelColors = [
        "",
        "text-rose-400",
        "text-orange-400",
        "text-amber-500",
        "text-emerald-500",
      ];

passInput.addEventListener("input", () => {
        const v = passInput.value;
        let score = 0;
        if (v.length >= 6) score++;
        if (v.length >= 10) score++;
        if (/[A-Z]/.test(v) && /[a-z]/.test(v)) score++;
        if (/[^A-Za-z0-9]/.test(v)) score++;

bars.forEach((b, i) => {
          b.className =
            "h-full strength-bar rounded-full transition-all duration-400";
          if (i < score) {
            b.style.width = "100%";
            b.classList.add(colors[score - 1]);
          } else {
            b.style.width = "0";
          }
        });

strLabel.textContent = v ? labels[score] || "" : "\u00A0";
        strLabel.className =
          "text-xs mt-1 ml-0.5 transition-colors duration-300 " +
          (labelColors[score] || "text-amber-400");
      });

// ── Form submission with animation ──
      const loginForm = document.getElementById("loginForm");
      const submitBtn = document.getElementById("submitBtn");
      const btnText = document.getElementById("btnText");
      const btnLoading = document.getElementById("btnLoading");
      const btnSuccess = document.getElementById("btnSuccess");

loginForm.addEventListener("submit", (e) => {
        e.preventDefault();

// Basic validation
        if (!emailRegex.test(emailInput.value)) {
          emailError.classList.remove("hidden");
          emailInput.classList.add("border-rose-300");
          loginForm.style.animation = "shake .5s ease";
          setTimeout(() => (loginForm.style.animation = ""), 500);
          return;
        }
        if (passInput.value.length < 1) {
          passInput.classList.add("border-rose-300");
          loginForm.style.animation = "shake .5s ease";
          setTimeout(() => {
            loginForm.style.animation = "";
            passInput.classList.remove("border-rose-300");
          }, 500);
          return;
        }

// Loading state
        submitBtn.disabled = true;
        btnText.classList.add("hidden");
        btnLoading.classList.remove("hidden");
        btnLoading.classList.add("flex");

// Simulate API call
        setTimeout(() => {
          btnLoading.classList.add("hidden");
          btnLoading.classList.remove("flex");
          btnSuccess.classList.remove("hidden");
          btnSuccess.classList.add("flex");
          submitBtn.classList.remove(
            "from-orange-500",
            "via-amber-500",
            "to-yellow-500",
          );
          submitBtn.classList.add(
            "from-emerald-400",
            "via-emerald-500",
            "to-teal-500",
          );

// 🎉 Confetti burst
          createConfetti();

setTimeout(() => {
            submitBtn.disabled = false;
            btnSuccess.classList.add("hidden");
            btnSuccess.classList.remove("flex");
            btnText.classList.remove("hidden");
            submitBtn.classList.remove(
              "from-emerald-400",
              "via-emerald-500",
              "to-teal-500",
            );
            submitBtn.classList.add(
              "from-orange-500",
              "via-amber-500",
              "to-yellow-500",
            );
          }, 2500);
        }, 1800);
      });

// ── Confetti ──
      function createConfetti() {
        const container = document.getElementById("confettiContainer");
        const emojis = ["🎉", "✨", "🌟", "💫", "⭐", "🎊", "🥳"];
        const confettiColors = [
          "#fb923c",
          "#fbbf24",
          "#f472b6",
          "#a78bfa",
          "#34d399",
          "#38bdf8",
        ];

for (let i = 0; i < 50; i++) {
          const el = document.createElement("div");
          const isEmoji = Math.random() > 0.6;

if (isEmoji) {
            el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
            el.style.fontSize = Math.random() * 14 + 10 + "px";
          } else {
            el.style.width = Math.random() * 8 + 4 + "px";
            el.style.height = el.style.width;
            el.style.borderRadius = Math.random() > 0.5 ? "50%" : "2px";
            el.style.background =
              confettiColors[Math.floor(Math.random() * confettiColors.length)];
          }

el.style.position = "absolute";
          el.style.left = Math.random() * 100 + "%";
          el.style.top = Math.random() * 40 + 30 + "%";
          el.style.animation = `confetti-fall ${Math.random() * 1.5 + 1}s ease-out ${Math.random() * 0.5}s forwards`;
          el.style.pointerEvents = "none";

container.appendChild(el);
        }

setTimeout(() => {
          container.innerHTML = "";
        }, 3000);
      }

// ── Focus animation for inputs ──
      document
        .querySelectorAll(
          'input[type="email"], input[type="password"], input[type="text"]',
        )
        .forEach((input) => {
          input.addEventListener("focus", () => {
            input
              .closest(".focus-ring")
              ?.classList.add("ring-3", "ring-orange-200/50");
          });
          input.addEventListener("blur", () => {
            input
              .closest(".focus-ring")
              ?.classList.remove("ring-3", "ring-orange-200/50");
          });
        });
    </script>
  </body>
</html>

Related Examples