Tailwind Sign-In Card with Decorative Side Panels

<div class="relative grid max-w-5xl w-full grid-cols-1 place-items-center gap-6 sm:mt-16 lg:mt-20 mt-14 mr-auto ml-auto">
            <!-- Left card -->
            <div class="pointer-events-none absolute -left-4 top-6 hidden w-[22rem] -rotate-3 rounded-2xl border border-white/10 bg-white/5 p-6 opacity-60 backdrop-blur md:block">
              <div class="mb-4 flex items-center gap-2 text-sm font-medium text-white/70">
                <i data-lucide="app-window" class="h-4 w-4 text-cyan-300"></i>
                Welcome to CrewSpace
              </div>
              <label for="left-email" class="mb-2 block text-xs font-medium text-white/60">Email address</label>
              <div class="rounded-xl border border-white/10 bg-neutral-900/40 p-2">
                <input id="left-email" type="email" placeholder="you@company.com" class="w-full bg-transparent px-2 py-1.5 text-sm text-white/80 placeholder:text-white/30 focus:outline-none">
              </div>
              <button class="mt-3 w-full rounded-xl bg-white/10 px-4 py-2 text-sm font-medium text-white/90 ring-1 ring-white/10 hover:bg-white/15">
                Continue
              </button>
              <p class="mt-3 text-center text-xs text-white/50">No account? <a href="#" class="text-cyan-300 hover:text-cyan-200">Create one</a></p>
            </div>

            <!-- Center card -->
            <div class="z-40 w-full max-w-lg shadow-black/50 bg-white/5 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-2xl backdrop-blur">
              <div class="mb-5 flex items-center justify-center gap-2 text-sm font-medium text-white/80">
                <div class="grid h-7 w-7 place-items-center rounded-full bg-white/5 ring-1 ring-white/10">
                  <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="w-[16px] h-[16px]" data-lucide="lock" style="width: 16px; height: 16px; color: rgb(103, 232, 249);"><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>
                <span class="">Sign in to StellarApp</span>
              </div>

              <label for="email" class="mb-2 block text-xs font-medium text-white/60">Email address</label>
              <div class="rounded-xl border border-white/10 bg-neutral-900/40 p-2">
                <div class="flex items-center gap-2 px-2">
                  <i data-lucide="mail" class="h-4 w-4 text-white/40"></i>
                  <input id="email" type="email" placeholder="name@domain.com" class="w-full bg-transparent py-2 text-sm text-white/80 placeholder:text-white/30 focus:outline-none">
                </div>
              </div>

              <button class="mt-3 w-full rounded-xl bg-gradient-to-tr from-cyan-500/80 to-indigo-500/80 px-4 py-2.5 text-sm font-medium text-white/95 shadow-lg shadow-cyan-900/30 ring-1 ring-white/10 hover:from-cyan-500 hover:to-indigo-500">
                Continue
              </button>

              <div class="my-4 flex items-center gap-3 text-xs text-white/40">
                <div class="h-px flex-1 bg-white/10"></div>
                OR
                <div class="h-px flex-1 bg-white/10"></div>
              </div>

              <div class="space-y-2">
                <button class="flex w-full gap-2 hover:border-white/20 hover:bg-white/10 text-sm font-medium text-white/85 bg-white/5 border-white/10 border rounded-xl pt-2.5 pr-4 pb-2.5 pl-4 items-center justify-center">
                  
                  Continue with Atlas ID
                </button>
                <button class="flex w-full items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm font-medium text-white/85 hover:border-white/20 hover:bg-white/10">
                  
                  Continue with Nimbus Workspace
                </button>
              </div>

              <p class="mt-4 text-center text-xs text-white/55">
                Don’t have an account? <a href="#" class="text-cyan-300 hover:text-cyan-200">Sign up</a>
              </p>
            </div>

            <!-- Right card -->
            <div class="pointer-events-none absolute -right-4 top-8 hidden w-[22rem] opacity-60 md:block bg-white/5 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 backdrop-blur rotate-3">
              <div class="mb-4 flex items-center gap-2 text-sm font-medium text-white/70">
                <i data-lucide="scan-face" class="h-4 w-4 text-cyan-300"></i>
                Verify in Sentinel
              </div>
              <p class="mb-3 text-xs text-white/55">Enter your one-time code from your authenticator.</p>
              <div class="grid grid-cols-6 gap-2">
                <input maxlength="1" inputmode="numeric" class="otp-input h-11 rounded-lg border border-white/10 bg-neutral-900/40 text-center text-base font-medium text-white/90 focus:border-cyan-400/40 focus:outline-none">
                <input maxlength="1" inputmode="numeric" class="otp-input h-11 rounded-lg border border-white/10 bg-neutral-900/40 text-center text-base font-medium text-white/90 focus:border-cyan-400/40 focus:outline-none">
                <input maxlength="1" inputmode="numeric" class="otp-input h-11 rounded-lg border border-white/10 bg-neutral-900/40 text-center text-base font-medium text-white/90 focus:border-cyan-400/40 focus:outline-none">
                <input maxlength="1" inputmode="numeric" class="otp-input h-11 rounded-lg border border-white/10 bg-neutral-900/40 text-center text-base font-medium text-white/90 focus:border-cyan-400/40 focus:outline-none">
                <input maxlength="1" inputmode="numeric" class="otp-input h-11 rounded-lg border border-white/10 bg-neutral-900/40 text-center text-base font-medium text-white/90 focus:border-cyan-400/40 focus:outline-none">
                <input maxlength="1" inputmode="numeric" class="otp-input h-11 rounded-lg border border-white/10 bg-neutral-900/40 text-center text-base font-medium text-white/90 focus:border-cyan-400/40 focus:outline-none">
              </div>
              <button class="mt-3 w-full rounded-xl bg-white/10 px-4 py-2 text-sm font-medium text-white/90 ring-1 ring-white/10">Continue</button>
              <p class="mt-3 text-center text-xs text-white/50">Prefer SMS? <a href="#" class="text-cyan-300 hover:text-cyan-200">Send code</a></p>
            </div>
          </div>