Login Fintech Glassmorphism

                <!--
@type: Login
@industry: Fintech
@style: Glassmorphism
@category: Sale, Page Section, UI Element, Content
@framework: Tailwind
@license: Free
-->

<section
  class="relative min-h-screen py-20 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden flex items-center justify-center"
>
  <div class="relative z-10 container mx-auto px-4">
    <div class="max-w-6xl mx-auto">
      <div class="grid lg:grid-cols-2 gap-12 items-center">
        <div
          class="space-y-8 transform transition-all duration-1000 translate-x-0 opacity-100"
        >
          <div class="space-y-6">
            <div class="inline-block">
              <span
                class="px-6 py-3 rounded-full text-sm font-medium bg-white/10 backdrop-blur-md border border-white/20 text-white"
                >🔐 Secure Access</span
              >
            </div>
            <h1 class="text-5xl md:text-7xl font-bold leading-tight">
              <span
                class="bg-gradient-to-r from-white via-blue-100 to-purple-200 bg-clip-text text-transparent"
                >Welcome to</span
              ><br /><span
                class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
                >FinTech Pro</span
              >
            </h1>
            <p class="text-xl text-gray-300 leading-relaxed">
              Access your financial dashboard with enterprise-grade security and
              seamless user experience.
            </p>
          </div>
          <div class="space-y-6">
            <h3 class="text-2xl font-bold text-white">Why Choose Us?</h3>
            <div class="grid gap-4">
              <div
                class="flex items-center space-x-4 p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
                style="animation-delay: 0ms"
              >
                <div
                  class="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center text-white"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="lucide lucide-shield w-6 h-6"
                  >
                    <path
                      d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
                    ></path>
                  </svg>
                </div>
                <span class="text-white font-medium">Bank-level Security</span>
              </div>
              <div
                class="flex items-center space-x-4 p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
                style="animation-delay: 200ms"
              >
                <div
                  class="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center text-white"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="lucide lucide-fingerprint w-6 h-6"
                  >
                    <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"></path>
                    <path d="M14 13.12c0 2.38 0 6.38-1 8.88"></path>
                    <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"></path>
                    <path d="M2 12a10 10 0 0 1 18-6"></path>
                    <path d="M2 16h.01"></path>
                    <path d="M21.8 16c.2-2 .131-5.354 0-6"></path>
                    <path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"></path>
                    <path d="M8.65 22c.21-.66.45-1.32.57-2"></path>
                    <path d="M9 6.8a6 6 0 0 1 9 5.2v2"></path>
                  </svg>
                </div>
                <span class="text-white font-medium"
                  >Biometric Authentication</span
                >
              </div>
              <div
                class="flex items-center space-x-4 p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
                style="animation-delay: 400ms"
              >
                <div
                  class="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center text-white"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="lucide lucide-smartphone w-6 h-6"
                  >
                    <rect
                      width="14"
                      height="20"
                      x="5"
                      y="2"
                      rx="2"
                      ry="2"
                    ></rect>
                    <path d="M12 18h.01"></path>
                  </svg>
                </div>
                <span class="text-white font-medium">2FA Protection</span>
              </div>
            </div>
          </div>
          <div class="grid grid-cols-3 gap-6">
            <div
              class="text-center p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
            >
              <div
                class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
              >
                99.9%
              </div>
              <div class="text-gray-300 text-sm">Uptime</div>
            </div>
            <div
              class="text-center p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
            >
              <div
                class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
              >
                256-bit
              </div>
              <div class="text-gray-300 text-sm">Encryption</div>
            </div>
            <div
              class="text-center p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
            >
              <div
                class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
              >
                24/7
              </div>
              <div class="text-gray-300 text-sm">Support</div>
            </div>
          </div>
        </div>
        <div
          class="transform transition-all duration-1000 delay-300 translate-x-0 opacity-100"
        >
          <div
            class="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-8"
          >
            <div class="flex mb-8 bg-white/5 backdrop-blur-sm rounded-2xl p-1">
              <button
                id="signInBtn"
                class="flex-1 py-3 px-6 rounded-xl font-medium transition-all duration-300 bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg"
                onclick="toggleForm('signin')"
              >
                Sign In</button
              ><button
                id="signUpBtn"
                class="flex-1 py-3 px-6 rounded-xl font-medium transition-all duration-300 text-gray-300 hover:text-white hover:bg-white/10"
                onclick="toggleForm('signup')"
              >
                Sign Up
              </button>
            </div>
            <form id="signinForm" class="space-y-6">
              <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-300"
                  >Email Address</label
                >
                <div class="relative">
                  <div
                    class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-mail w-5 h-5 text-gray-400"
                    >
                      <rect width="20" height="16" x="2" y="4" rx="2"></rect>
                      <path
                        d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
                      ></path>
                    </svg>
                  </div>
                  <input
                    class="w-full pl-12 pr-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
                    placeholder="Enter your email"
                    type="email"
                    value=""
                  />
                </div>
              </div>
              <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-300"
                  >Password</label
                >
                <div class="relative">
                  <div
                    class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-lock w-5 h-5 text-gray-400"
                    >
                      <rect
                        width="18"
                        height="11"
                        x="3"
                        y="11"
                        rx="2"
                        ry="2"
                      ></rect>
                      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                  </div>
                  <input
                    class="w-full pl-12 pr-12 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
                    placeholder="Enter your password"
                    type="password"
                    value=""
                  /><button
                    type="button"
                    class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-white transition-colors duration-200"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-eye w-5 h-5"
                    >
                      <path
                        d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
                      ></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="flex items-center justify-between">
                <label class="flex items-center space-x-3 cursor-pointer"
                  ><input
                    class="w-4 h-4 rounded border-white/20 bg-white/5 text-purple-600 focus:ring-purple-500/50"
                    type="checkbox"
                  /><span class="text-sm text-gray-300"
                    >Remember me</span
                  ></label
                ><button
                  type="button"
                  class="text-sm text-purple-400 hover:text-purple-300 transition-colors duration-200"
                >
                  Forgot password?
                </button>
              </div>
              <button
                type="submit"
                class="w-full py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-2xl transition-all duration-300 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
              >
                <span>Sign In</span
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-arrow-right w-5 h-5 group-hover:translate-x-1 transition-transform duration-200"
                >
                  <path d="M5 12h14"></path>
                  <path d="m12 5 7 7-7 7"></path>
                </svg>
              </button>
            </form>

            <form id="signupForm" class="space-y-6 hidden">
              <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-300"
                  >Full Name</label
                >
                <div class="relative">
                  <div
                    class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-user w-5 h-5 text-gray-400"
                    >
                      <path
                        d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
                      ></path>
                      <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                  </div>
                  <input
                    class="w-full pl-12 pr-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
                    placeholder="Enter your full name"
                    type="text"
                  />
                </div>
              </div>
              <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-300"
                  >Email Address</label
                >
                <div class="relative">
                  <div
                    class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-mail w-5 h-5 text-gray-400"
                    >
                      <rect width="20" height="16" x="2" y="4" rx="2"></rect>
                      <path
                        d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
                      ></path>
                    </svg>
                  </div>
                  <input
                    class="w-full pl-12 pr-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
                    placeholder="Enter your email"
                    type="email"
                  />
                </div>
              </div>
              <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-300"
                  >Password</label
                >
                <div class="relative">
                  <div
                    class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-lock w-5 h-5 text-gray-400"
                    >
                      <rect
                        width="18"
                        height="11"
                        x="3"
                        y="11"
                        rx="2"
                        ry="2"
                      ></rect>
                      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                  </div>
                  <input
                    class="w-full pl-12 pr-12 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
                    placeholder="Create a password"
                    type="password"
                  />
                </div>
              </div>
              <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-300"
                  >Confirm Password</label
                >
                <div class="relative">
                  <div
                    class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-lock w-5 h-5 text-gray-400"
                    >
                      <rect
                        width="18"
                        height="11"
                        x="3"
                        y="11"
                        rx="2"
                        ry="2"
                      ></rect>
                      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                  </div>
                  <input
                    class="w-full pl-12 pr-12 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
                    placeholder="Confirm your password"
                    type="password"
                  />
                </div>
              </div>
              <button
                type="submit"
                class="w-full py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-2xl transition-all duration-300 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
              >
                <span>Create Account</span
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-arrow-right w-5 h-5 group-hover:translate-x-1 transition-transform duration-200"
                >
                  <path d="M5 12h14"></path>
                  <path d="m12 5 7 7-7 7"></path>
                </svg>
              </button>
            </form>

            <div class="my-8 flex items-center">
              <div
                class="flex-1 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"
              ></div>
              <span class="px-4 text-sm text-gray-400">or continue with</span>
              <div
                class="flex-1 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"
              ></div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <button
                class="py-3 px-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white font-medium transition-all duration-300 hover:scale-105 hover:bg-white/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
              >
                <div
                  class="w-5 h-5 rounded p-0.5 flex items-center justify-center"
                >
                  <img
                    src="https://landinggo.com/assets/img/stock/login/google.svg"
                    alt="Google"
                    class="w-5 h-5"
                  />
                </div>
                <span
                  class="group-hover:translate-x-1 transition-transform duration-200"
                  >Google</span
                ></button
              ><button
                class="py-3 px-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white font-medium transition-all duration-300 hover:scale-105 hover:bg-white/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
              >
                <div
                  class="w-5 h-5 rounded p-0.5 flex items-center justify-center"
                >
                  <img
                    src="https://landinggo.com/assets/img/stock/login/github.svg"
                    alt="GitHub"
                    class="w-5 h-5"
                  />
                </div>
                <span
                  class="group-hover:translate-x-1 transition-transform duration-200"
                  >GitHub</span
                ></button
              ><button
                class="py-3 px-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white font-medium transition-all duration-300 hover:scale-105 hover:bg-white/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
              >
                <div
                  class="w-5 h-5 rounded p-0.5 flex items-center justify-center"
                >
                  <img
                    src="https://landinggo.com/assets/img/stock/login/linkedin.svg"
                    alt="LinkedIn"
                    class="w-5 h-5"
                  />
                </div>
                <span
                  class="group-hover:translate-x-1 transition-transform duration-200"
                  >LinkedIn</span
                ></button
              ><button
                class="py-3 px-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white font-medium transition-all duration-300 hover:scale-105 hover:bg-white/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
              >
                <div
                  class="w-5 h-5 rounded p-0.5 flex items-center justify-center"
                >
                  <img
                    src="https://landinggo.com/assets/img/stock/login/facebook.svg"
                    alt="Facebook"
                    class="w-5 h-5"
                  />
                </div>
                <span
                  class="group-hover:translate-x-1 transition-transform duration-200"
                  >Facebook</span
                >
              </button>
            </div>
            <div class="mt-8 text-center space-y-4">
              <div class="text-sm text-gray-400">
                Need help?
                <button
                  class="text-purple-400 hover:text-purple-300 transition-colors duration-200"
                >
                  Contact Support
                </button>
              </div>
              <div
                class="flex items-center justify-center space-x-4 text-xs text-gray-500"
              >
                <button
                  class="hover:text-gray-300 transition-colors duration-200"
                >
                  Privacy</button
                ><span>•</span
                ><button
                  class="hover:text-gray-300 transition-colors duration-200"
                >
                  Terms</button
                ><span>•</span
                ><button
                  class="hover:text-gray-300 transition-colors duration-200"
                >
                  Security
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    function toggleForm(formType) {
      const signinForm = document.getElementById('signinForm')
      const signupForm = document.getElementById('signupForm')
      const signinBtn = document.getElementById('signInBtn')
      const signupBtn = document.getElementById('signUpBtn')

      if (formType === 'signin') {
        signinForm.classList.remove('hidden')
        signupForm.classList.add('hidden')
        signinBtn.classList.add(
          'bg-gradient-to-r',
          'from-blue-600',
          'to-purple-600',
          'text-white',
          'shadow-lg'
        )
        signinBtn.classList.remove('text-gray-300')
        signupBtn.classList.remove(
          'bg-gradient-to-r',
          'from-blue-600',
          'to-purple-600',
          'text-white',
          'shadow-lg'
        )
        signupBtn.classList.add('text-gray-300')
      } else {
        signinForm.classList.add('hidden')
        signupForm.classList.remove('hidden')
        signupBtn.classList.add(
          'bg-gradient-to-r',
          'from-blue-600',
          'to-purple-600',
          'text-white',
          'shadow-lg'
        )
        signupBtn.classList.remove('text-gray-300')
        signinBtn.classList.remove(
          'bg-gradient-to-r',
          'from-blue-600',
          'to-purple-600',
          'text-white',
          'shadow-lg'
        )
        signinBtn.classList.add('text-gray-300')
      }
    }
  </script>
</section>