Register Box

<!--
  Day 34: Register 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
-->

<!-- Register Box -->
<div
  class="mx-auto w-full max-w-sm rounded-xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="flex grow items-center px-6 py-10 sm:px-10 sm:py-14">
    <div class="grow">
      <div class="text-center">
        <svg
          viewBox="0 0 78 30"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="mb-6 inline-block w-10 text-zinc-400"
        >
          <path
            d="M18.5147 0C15.4686 0 12.5473 1.21005 10.3934 3.36396L3.36396 10.3934C1.21005 12.5473 0 15.4686 0 18.5147C0 24.8579 5.14214 30 11.4853 30C14.5314 30 17.4527 28.7899 19.6066 26.636L24.4689 21.7737C24.469 21.7738 24.4689 21.7736 24.4689 21.7737L38.636 7.6066C39.6647 6.57791 41.0599 6 42.5147 6C44.9503 6 47.0152 7.58741 47.7311 9.78407L52.2022 5.31296C50.1625 2.11834 46.586 0 42.5147 0C39.4686 0 36.5473 1.21005 34.3934 3.36396L15.364 22.3934C14.3353 23.4221 12.9401 24 11.4853 24C8.45584 24 6 21.5442 6 18.5147C6 17.0599 6.57791 15.6647 7.6066 14.636L14.636 7.6066C15.6647 6.57791 17.0599 6 18.5147 6C20.9504 6 23.0152 7.58748 23.7311 9.78421L28.2023 5.31307C26.1626 2.1184 22.5861 0 18.5147 0Z"
            fill="currentColor"
          ></path>
          <path
            d="M39.364 22.3934C38.3353 23.4221 36.9401 24 35.4853 24C33.05 24 30.9853 22.413 30.2692 20.2167L25.7982 24.6877C27.838 27.8819 31.4143 30 35.4853 30C38.5314 30 41.4527 28.7899 43.6066 26.636L62.636 7.6066C63.6647 6.57791 65.0599 6 66.5147 6C69.5442 6 72 8.45584 72 11.4853C72 12.9401 71.4221 14.3353 70.3934 15.364L63.364 22.3934C62.3353 23.4221 60.9401 24 59.4853 24C57.0498 24 54.985 22.4127 54.269 20.2162L49.798 24.6873C51.8377 27.8818 55.4141 30 59.4853 30C62.5314 30 65.4527 28.7899 67.6066 26.636L74.636 19.6066C76.7899 17.4527 78 14.5314 78 11.4853C78 5.14214 72.8579 0 66.5147 0C63.4686 0 60.5473 1.21005 58.3934 3.36396L39.364 22.3934Z"
            fill="currentColor"
          ></path>
        </svg>
        <h1 class="text-2xl font-extrabold">Create a new account</h1>
        <h2 class="mt-1 text-sm leading-relaxed text-zinc-600">
          Already have an account?
          <a
            href="javascript:void(0)"
            class="text-zinc-800 underline decoration-slate-300 underline-offset-2 hover:text-zinc-900"
            >Log in</a
          >
        </h2>
      </div>
      <form class="mt-5 flex flex-col gap-5">
        <div class="space-y-1">
          <label for="name" class="inline-block text-sm font-medium"
            >Name</label
          >
          <input
            id="name"
            type="text"
            required
            class="block w-full rounded-lg border border-zinc-200 px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50"
          />
        </div>
        <div class="space-y-1">
          <label for="email" class="inline-block text-sm font-medium"
            >Email</label
          >
          <input
            id="email"
            type="email"
            required
            class="block w-full rounded-lg border border-zinc-200 px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50"
          />
        </div>
        <div class="space-y-1">
          <label for="password" class="inline-block text-sm font-medium"
            >Password</label
          >
          <input
            id="password"
            type="password"
            required
            class="block w-full rounded-lg border border-zinc-200 px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50"
          />
        </div>
        <div class="space-y-1">
          <label for="password-confirmation" class="text-sm font-medium"
            >Confirm Password</label
          >
          <input
            id="password-confirmation"
            type="password"
            required
            class="block w-full rounded-lg border border-zinc-200 px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50"
          />
        </div>
        <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"
        >
          Register
        </button>
        <div class="text-center text-xs font-medium text-zinc-500">
          Amazing App &copy; 2024 and beyond
        </div>
      </form>
    </div>
  </div>
</div>
<!-- END Register Box -->