Animated Dark Sign-In Card with Tailwind Glassmorphism

<section class="order-1 lg:order-2 relative">
        <div class="group relative w-full h-full">
          <!-- Rotating blur background -->
          <div class="absolute inset-0 rounded-2xl overflow-hidden">
            <div class="pointer-events-none absolute -inset-10 rounded-full bg-gradient-to-r from-transparent via-gray-400/20 to-transparent blur-xl opacity-50 animate-spin [animation-duration:10s]"></div>
            <div class="pointer-events-none absolute -inset-20 rounded-full bg-gradient-to-r from-transparent via-gray-500/15 to-transparent blur-2xl opacity-30 animate-spin [animation-duration:18s] [animation-direction:reverse]"></div>
          </div>

          <!-- Border gradient -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-b from-gray-300/40 via-gray-600/60 to-gray-800/50 transition-opacity duration-300 group-hover:opacity-100"></div>

          <!-- Card -->
          <div class="relative h-full overflow-hidden ring-1 ring-white/15 transition-all duration-300 ease-out hover:-translate-y-0.5 hover:ring-gray-400/30 hover:shadow-[0_10px_40px_-10px_rgba(107,114,128,0.4)] rounded-2xl shadow-inner" style="
            background-color: hsl(220, 13%, 9%);
            background-image:
              radial-gradient(at 88% 40%, hsl(220, 13%, 9%) 0px, transparent 85%),
              radial-gradient(at 49% 30%, hsl(220, 13%, 9%) 0px, transparent 85%),
              radial-gradient(at 14% 26%, hsl(220, 13%, 9%) 0px, transparent 85%),
              radial-gradient(at 0% 64%, hsl(220, 9%, 46%) 0px, transparent 85%),
              radial-gradient(at 41% 94%, hsl(215, 14%, 34%) 0px, transparent 85%),
              radial-gradient(at 100% 99%, hsl(217, 19%, 27%) 0px, transparent 85%);
          ">
            <div class="relative sm:p-8 lg:p-10 flex flex-col h-full pt-6 pr-6 pb-6 pl-6">
              <!-- Header -->
              <div class="mb-8">
                <div class="flex items-center gap-2 text-xs text-gray-400 mb-3">
                  <span class="h-1.5 w-1.5 rounded-full bg-emerald-400/80"></span>
                  <span>Secure area</span>
                </div>
                <h2 class="text-2xl sm:text-3xl font-semibold tracking-tight text-white">Sign in</h2>
                <p class="text-sm text-gray-400 mt-1.5">Use your email and password, or continue with your provider.</p>
              </div>

              <!-- Form -->
              <form id="login-form" class="space-y-5" action="#" method="post" novalidate="">
                <!-- Email -->
                <div class="">
                  <label for="email" class="block text-xs font-medium text-gray-300 mb-1.5">Email</label>
                  <div class="relative group/email">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" class=""></path>
                        <polyline points="22,6 12,13 2,6" class=""></polyline>
                      </svg>
                    </div>
                    <input id="email" name="email" type="email" autocomplete="email" required="" class="w-full rounded-lg bg-gray-900/50 text-gray-100 placeholder-gray-500 ring-1 ring-gray-600/30 focus:ring-2 focus:ring-gray-400/50 focus:outline-none transition px-10 py-2.5 text-sm" placeholder="you@example.com">
                  </div>
                </div>

                <!-- Password -->
                <div class="">
                  <div class="flex items-center justify-between">
                    <label for="password" class="block text-xs font-medium text-gray-300 mb-1.5">Password</label>
                    <a href="#" class="text-xs text-gray-400 hover:text-gray-200 hover:underline underline-offset-4">Forgot?</a>
                  </div>
                  <div class="relative group/password">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect>
                        <path d="m7 11V7a5 5 0 0 1 10 0v4" class=""></path>
                      </svg>
                    </div>
                    <input id="password" name="password" type="password" autocomplete="current-password" required="" class="w-full rounded-lg bg-gray-900/50 text-gray-100 placeholder-gray-500 ring-1 ring-gray-600/30 focus:ring-2 focus:ring-gray-400/50 focus:outline-none transition px-10 pr-11 py-2.5 text-sm" placeholder="••••••••">
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400">
                      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" class=""></path>
                        <circle cx="12" cy="12" r="3" class=""></circle>
                      </svg>
                    </div>
                  </div>
                </div>

                <!-- Options -->
                <div class="flex items-center justify-between">
                  <!-- Custom checkbox -->
                  <label class="flex items-center gap-2 cursor-pointer select-none">
                    <input id="remember" name="remember" type="checkbox" class="sr-only peer">
                    <span class="h-4 w-4 rounded-md ring-1 ring-gray-600/40 bg-gray-900/50 flex items-center justify-center peer-checked:bg-gray-200 peer-checked:ring-gray-200 transition">
                      <svg class="h-3 w-3 text-gray-900 opacity-0 peer-checked:opacity-100 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path d="m9 12 2 2 4-4" class=""></path>
                      </svg>
                    </span>
                    <span class="text-xs text-gray-300">Remember me</span>
                  </label>
                  <a href="#" class="text-xs text-gray-400 hover:text-gray-200 hover:underline underline-offset-4">Trouble signing in?</a>
                </div>

                <!-- Submit -->
                <button type="submit" class="w-full inline-flex gap-2 shadow-[inset_0_-2px_25px_-4px_rgba(255,255,255,0.2)] ring-1 ring-white/10 hover:ring-gray-300/40 hover:from-gray-600 hover:to-gray-500 hover:shadow-lg transition-all duration-300 focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400/60 text-sm font-medium text-white bg-gradient-to-r from-gray-700 to-gray-600 rounded-lg pt-2.5 pr-4 pb-2.5 pl-4 items-center justify-center">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-in-icon lucide-log-in" style="width: 16px; height: 16px; color: rgb(255, 255, 255);">
    <path d="m10 17 5-5-5-5" class=""></path>
    <path d="M15 12H3" class=""></path>
    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" class=""></path>
  </svg>
  Sign in
</button>

                <!-- Divider -->
                <div class="relative py-1">
                  <div class="absolute inset-0 flex items-center" aria-hidden="true">
                    <div class="w-full border-t border-white/10"></div>
                  </div>
                  <div class="relative flex justify-center">
                    <span class="bg-transparent px-2 text-[10px] uppercase tracking-wide text-gray-500">or</span>
                  </div>
                </div>

                <!-- Provider -->
                <button type="button" class="w-full inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium text-gray-300 bg-gray-800/60 ring-1 ring-gray-600/30 hover:bg-gray-700/60 hover:text-white hover:ring-gray-500/40 transition-all duration-300 focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400/60">
                  <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" stroke="none">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" class=""></path>
                  </svg>
                  Continue with GitHub
                </button>
              </form>

              <!-- Footer -->
              <div class="mt-8 text-xs text-gray-500">
                <div class="flex items-center justify-between">
                  <p>Don't have an account? <a href="#" class="text-gray-300 hover:text-white hover:underline underline-offset-4">Sign up</a></p>
                  <div class="flex items-center gap-3">
                    <a href="#" class="hover:text-white transition">Terms</a>
                    <span class="text-gray-600">•</span>
                    <a href="#" class="hover:text-white transition">Privacy</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>