Log In Box

<!--
  Day 33: Log in 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
-->

<!-- Log In Box -->
<div
  class="relative 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
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 50 39"
          class="mb-6 inline-block w-10"
        >
          <path fill="#007AFF" d="M16.5 2h21.08L22.083 24.973H1L16.5 2Z" />
          <path
            fill="#312ECB"
            d="M17.422 27.102 11.42 36h22.082L49 13.027H32.702l-9.496 14.075h-5.784Z"
          />
        </svg>
        <h1 class="text-2xl font-extrabold">Welcome to your app</h1>
        <h2 class="mt-1 text-sm leading-relaxed text-zinc-600">
          Please log in to access your dashboard.
        </h2>
      </div>
      <form class="mt-5 flex flex-col gap-5">
        <div class="space-y-2">
          <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-2">
          <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>
        <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"
        >
          Log in
        </button>
        <div class="text-center text-xs font-medium text-zinc-500">
          Don't have an account yet?
          <a
            href="javascript:void(0)"
            class="text-zinc-800 underline decoration-slate-300 underline-offset-2 hover:text-zinc-900"
            >Register now</a
          >
        </div>
      </form>
    </div>
  </div>
</div>
<!-- END Log In Box -->