Tarjeta de inicio de sesión de vidrio

<style>
  [x-cloak] {
    display: none !important;
  }

  body {
    background-color: #050505;
    color: #f8fafc;
    overflow: hidden;
  }

  .glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }

  .glow-button {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
    transition: all 0.3s ease;
  }

  .glow-button:hover {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
  }

  .input-glass {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
  }

  .input-glass:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.1);
    outline: none;
  }

  .floating-bg {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
  }
</style>
<div class="glass-card rounded-[2.5rem] p-8 md:p-10">
  <form class="space-y-6">
    
    <div class="space-y-2">
      <label class="text-xs font-bold text-white/40 uppercase tracking-widest ml-1">Email Address</label>
      <div class="relative group">
        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-white/20 group-focus-within:text-indigo-500 transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor">
            <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.206">
            </path>
          </svg>
        </div>
        <input type="email" placeholder="name@example.com" required class="w-full h-14 pl-12 pr-4 rounded-2xl input-glass text-sm font-medium" />
      </div>
    </div>

    
    <div class="space-y-2">
      <div class="flex items-center justify-between px-1">
        <label class="text-xs font-bold text-white/40 uppercase tracking-widest">Password</label>
        <a href="#" class="text-[10px] font-bold text-indigo-400 hover:text-indigo-300 transition-colors uppercase tracking-widest">Forgot?</a>
      </div>
      <div class="relative group">
        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-white/20 group-focus-within:text-indigo-500 transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor">
            <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">
            </path>
          </svg>
        </div>
        <input placeholder="••••••••" required class="w-full h-14 pl-12 pr-12 rounded-2xl input-glass text-sm font-medium" type="password" />
        <button type="button" class="absolute inset-y-0 right-0 pr-4 flex items-center text-white/20 hover:text-white transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
            </path>
            <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">
            </path>
          </svg>
          <svg class="w-5 h-5" fill="none" stroke="currentColor" style="display:none">
            <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.542-7a9.97 9.97 0 011.563-3.04m4.066-1.29A10.048 10.048 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.05 10.05 0 01-1.24 3.103m-4.356-4.356a3 3 0 11-4.242-4.242">
            </path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18"></path>
          </svg>
        </button>
      </div>
    </div>

    
    <label class="flex items-center gap-3 cursor-pointer group">
      <div class="relative">
        <input type="checkbox" class="sr-only" />
        <div class="w-10 h-5 bg-white/5 rounded-full transition-colors group-hover:bg-white/10 bg-indigo-600/40"></div>
        <div class="absolute left-1 top-1 w-3 h-3 bg-white/20 rounded-full transition-all left-6 bg-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.5)]"></div>
      </div>
      <span class="text-xs font-bold text-white/40 group-hover:text-white/60 transition-colors uppercase tracking-widest">Remember
        this device</span>
    </label>

    
    <button type="submit" class="w-full h-14 bg-indigo-600 text-white rounded-2xl font-bold glow-button hover:bg-indigo-500 transition-all">
      Sign In
    </button>
  </form>

  
  <div class="flex items-center gap-4 my-8">
    <div class="h-px flex-1 bg-white/5"></div>
    <span class="text-[10px] font-black text-white/20 uppercase tracking-[0.3em]">Or continue with</span>
    <div class="h-px flex-1 bg-white/5"></div>
  </div>

  
  <div class="grid grid-cols-2 gap-4">
    <button class="h-14 rounded-2xl bg-white/5 border border-white/5 flex items-center justify-center gap-3 hover:bg-white/10 transition-all group">
      <svg class="w-5 h-5 group-hover:scale-110 transition-transform">
        <path d="M23.49 12.275c0-.826-.074-1.621-.21-2.389H12v4.518h6.44c-.278 1.498-1.122 2.766-2.39 3.616v3.006h3.87c2.264-2.084 3.57-5.153 3.57-8.751z" fill="#4285F4"></path>
        <path d="M12 24c3.24 0 5.958-1.075 7.944-2.914l-3.87-3.006c-1.072.718-2.443 1.143-4.074 1.143-3.133 0-5.786-2.115-6.733-4.96H1.42v3.122C3.394 21.432 7.42 24 12 24z" fill="#34A853"></path>
        <path d="M5.267 14.263c-.24-.718-.377-1.483-.377-2.263s.137-1.545.377-2.263V6.615H1.42C.516 8.42 0 10.453 0 12.6c0 2.147.516 4.18 1.42 5.985l3.847-3.322z" fill="#FBBC05"></path>
        <path d="M12 4.773c1.762 0 3.344.605 4.586 1.794l3.44-3.44C17.953 1.053 15.235 0 12 0 7.42 0 3.394 2.568 1.42 6.615l3.847 3.322c.947-2.845 3.6-4.96 6.733-4.96z" fill="#EA4335"></path>
      </svg>
      <span class="text-xs font-bold uppercase tracking-widest">Google</span>
    </button>
    <button class="h-14 rounded-2xl bg-white/5 border border-white/5 flex items-center justify-center gap-3 hover:bg-white/10 transition-all group">
      <svg class="w-5 h-5 group-hover:scale-110 transition-transform fill-white">
        <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z">
        </path>
      </svg>
      <span class="text-xs font-bold uppercase tracking-widest">Apple</span>
    </button>
  </div>
</div>