Your free Tailwind CSS component of the day is here.

<!-- Pages: Password Reset: Boxed Glass -->
<!-- Page Container -->
<div
  id="page-container"
  class="mx-auto flex min-h-dvh w-full min-w-80 flex-col bg-white dark:bg-gray-950 dark:text-gray-100"
>
  <!-- Page Content -->
  <main id="page-content" class="flex max-w-full flex-auto flex-col">
    <!-- Password Reset Section -->
    <div
      class="relative container mx-auto min-h-dvh overflow-hidden px-4 py-16 lg:px-8 lg:py-24 xl:max-w-6xl"
    >
      <!-- Heading -->
      <div class="mx-auto max-w-3xl text-center">
        <div class="mb-12 text-center">
          <a
            href="javascript:void(0)"
            class="group inline-flex items-center gap-1.5 text-xl font-bold text-gray-950 hover:opacity-75 active:opacity-100 dark:text-gray-100"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 78 32"
              fill="none"
              class="w-8"
            >
              <path
                d="M55.5 0H77.5L58.5 32H36.5L55.5 0Z"
                class="ccustom"
                fill="#3f3f46"
              ></path>
              <path
                d="M35.5 0H51.5L32.5 32H16.5L35.5 0Z"
                class="ccompli1"
                fill="#71717a"
              ></path>
              <path
                d="M19.5 0H31.5L12.5 32H0.5L19.5 0Z"
                class="ccompli2"
                fill="#d4d4d8"
              ></path>
            </svg>
            <span>Carbon</span>
          </a>
        </div>
        <div class="mb-5 flex items-center justify-center">
          <div
            class="inline-flex items-center gap-2 rounded-full bg-gray-100 py-1.5 pr-3 pl-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"
          >
            <span
              class="inline-flex items-center justify-center rounded-full bg-blue-700 px-2 py-1.5 text-xs leading-none font-medium text-white"
            >
              Secure
            </span>
            <span>Password Reset</span>
          </div>
        </div>
        <div>
          <h1 class="mb-4 text-4xl font-black text-black dark:text-white">
            Reset your password
          </h1>
          <h2
            class="text-lg/relaxed font-medium text-gray-700 dark:text-gray-400"
          >
            Enter your email address and we'll send you instructions on how to
            reset your password and secure your account.
          </h2>
        </div>
      </div>
      <!-- END Heading -->

      <!-- Password Reset Form -->
      <div class="relative mx-auto mt-20 max-w-lg">
        <div
          class="absolute inset-0 -inset-x-6 rounded-3xl bg-linear-to-b from-blue-300 via-teal-500 to-blue-700 opacity-15 blur-xl"
        ></div>
        <div
          class="relative rounded-2xl bg-white/40 p-2.5 ring-1 ring-gray-200/50 backdrop-blur-xs dark:bg-gray-500/20 dark:ring-gray-700/60"
        >
          <form
            onsubmit="return false;"
            class="rounded-xl bg-white p-6 lg:p-12 dark:bg-gray-950"
          >
            <div class="flex flex-col gap-5">
              <div class="space-y-1">
                <label for="email" class="inline-block text-sm font-medium"
                  >Email</label
                >
                <input
                  type="email"
                  id="email"
                  name="email"
                  class="block w-full rounded-lg border border-gray-200 px-3 py-2.5 leading-6 placeholder-gray-500 focus:border-gray-400 focus:ring-3 focus:ring-gray-500/25 dark:border-gray-700/75 dark:bg-gray-950 dark:placeholder-gray-400 dark:focus:border-gray-600"
                  required
                />
              </div>
              <div>
                <button
                  type="submit"
                  class="group flex w-full items-center justify-center gap-2 rounded-full border border-gray-800 bg-gray-800 px-4 py-3 text-sm leading-5 font-semibold text-white hover:border-gray-700 hover:bg-gray-700 hover:text-white focus:ring-3 focus:ring-gray-400/50 active:border-gray-700 active:bg-gray-800 dark:border-white dark:bg-white dark:text-gray-900 dark:hover:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-950 dark:focus:ring-gray-500/90 dark:active:border-white dark:active:bg-white"
                >
                  <span>Password reset</span>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!-- END Password Reset Form -->
    </div>
    <!-- END Password Reset Section -->
  </main>
  <!-- END Page Content -->
</div>
<!-- END Page Container -->
<!-- END Pages: Password Reset: Boxed Glass -->