Liquid Glass Login Box

<!--
  Day 79: Liquid Glass Login Box

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Liquid Glass Login Box -->
<!-- Add a 'shadow-lg' class to the div if using on top of an image background -->
<div
  class="relative mx-auto w-full max-w-lg rounded-3xl bg-white/40 p-px ring-4 ring-zinc-200/50 backdrop-blur-lg"
>
  <!-- Border Details -->
  <div
    class="absolute inset-0 rounded-3xl border border-white mask-linear-135 mask-linear-from-0% mask-linear-to-20%"
  ></div>
  <div
    class="absolute inset-0 rounded-3xl border border-white -mask-linear-45 mask-linear-from-10% mask-linear-to-20%"
  ></div>
  <div
    class="absolute inset-0 rounded-3xl border border-white/90 mask-linear-40 mask-linear-from-0% mask-linear-to-10%"
  ></div>
  <div
    class="absolute inset-0 rounded-3xl border border-white/90 -mask-linear-110 mask-linear-from-0% mask-linear-to-5%"
  ></div>
  <!-- END Border Details -->

  <!-- Content -->
  <div class="relative rounded-3xl bg-white/20">
    <!-- Header -->
    <div class="px-6 pt-6 sm:px-8 sm:pt-8">
      <div class="text-center">
        <div
          class="mx-auto mb-6 flex size-16 items-center justify-center rounded-2xl bg-gradient-to-br from-purple-600 to-sky-600 ring-2 ring-white/50"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 50 39"
            class="inline-block size-8 text-white"
          >
            <path
              fill="currentColor"
              d="M16.5 2h21.08L22.083 24.973H1L16.5 2Z"
            />
            <path
              fill="currentColor"
              d="M17.422 27.102 11.42 36h22.082L49 13.027H32.702l-9.496 14.075h-5.784Z"
            />
          </svg>
        </div>
        <h1 class="text-2xl font-extrabold text-zinc-800">Welcome back</h1>
        <p class="mt-1 text-sm text-zinc-700">Please sign in to your account</p>
      </div>
    </div>
    <!-- END Header -->

    <!-- Login Form -->
    <form class="space-y-6 p-6 sm:p-8">
      <!-- Inputs -->
      <div
        class="relative flex flex-col gap-6 rounded-2xl bg-white/30 p-6 shadow-lg shadow-zinc-500/5"
      >
        <div
          class="absolute inset-0 rounded-2xl border border-white mask-linear-135 mask-linear-from-0% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-45 mask-linear-from-10% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 mask-linear-40 mask-linear-from-0% mask-linear-to-30%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-110 mask-linear-from-0% mask-linear-to-15%"
        ></div>

        <!-- Email Input -->
        <div class="relative space-y-2">
          <label for="email" class="block text-sm font-medium text-zinc-700"
            >Email</label
          >
          <input
            id="email"
            type="email"
            required
            class="block w-full rounded-lg border-0 bg-white/60 px-4 py-3 text-sm font-medium text-zinc-800 placeholder-zinc-500 shadow-md shadow-zinc-500/10 backdrop-blur-sm focus:bg-white/80 focus:ring-2 focus:ring-zinc-500/90 focus:outline-none"
            placeholder="Enter your email"
          />
        </div>
        <!-- END END Email Input -->

        <!-- Password Input -->
        <div class="relative space-y-2">
          <label for="password" class="block text-sm font-medium text-zinc-700"
            >Password</label
          >
          <input
            id="password"
            type="password"
            required
            class="block w-full rounded-lg border-0 bg-white/60 px-4 py-3 text-sm font-medium text-zinc-800 placeholder-zinc-500 shadow-md shadow-zinc-500/10 backdrop-blur-sm focus:bg-white/80 focus:ring-2 focus:ring-zinc-500/90 focus:outline-none"
            placeholder="Enter your password"
          />
        </div>
        <!-- END END Password Input -->
      </div>
      <!-- END Inputs -->

      <!-- Login Button -->
      <button
        type="submit"
        class="flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
      >
        Sign In
      </button>
      <!-- END Login Button -->

      <!-- Register Link -->
      <div class="text-center">
        <p class="text-sm text-zinc-600">
          Don't have an account yet?
          <a
            href="javascript:void(0)"
            class="font-medium text-purple-700 underline decoration-purple-600 underline-offset-2 hover:text-purple-600"
          >
            Create account
          </a>
        </p>
      </div>
      <!-- END Register Link -->
    </form>
    <!-- END Login Form -->
  </div>
  <!-- END Content -->
</div>
<!-- END Liquid Glass Login Box -->