Login Box with Image

<!--
  Day 60: Login box with image

  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
-->

<!-- Login box with image -->
<div
  class="relative mx-auto grid w-full max-w-4xl grid-cols-1 overflow-hidden rounded-xl bg-white shadow-sm ring-8 shadow-zinc-500/10 ring-zinc-900/5 md:grid-cols-2"
>
  <!-- Form -->
  <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"
          viewBox="0 0 49 40"
          fill="none"
          class="mb-6 inline-block w-10"
        >
          <path
            d="M37.3947 40C43.8275 39.8689 49 34.6073 49 28.1389C49 24.9931 47.7512 21.9762 45.5282 19.7518L25.7895 0V12.2771C25.7895 14.3303 26.6046 16.2995 28.0556 17.7514L32.6795 22.3784L32.6921 22.3907L40.4452 30.149C40.697 30.4009 40.697 30.8094 40.4452 31.0613C40.1935 31.3133 39.7852 31.3133 39.5335 31.0613L36.861 28.3871H12.139L9.46655 31.0613C9.21476 31.3133 8.80654 31.3133 8.55476 31.0613C8.30297 30.8094 8.30297 30.4009 8.55475 30.149L16.3079 22.3907L16.3205 22.3784L20.9444 17.7514C22.3954 16.2995 23.2105 14.3303 23.2105 12.2771V0L3.47175 19.7518C1.24882 21.9762 0 24.9931 0 28.1389C0 34.6073 5.17252 39.8689 11.6053 40H37.3947Z"
            fill="#FF0A0A"
          ></path>
        </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 bg-white 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 focus:outline-hidden"
          />
        </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 bg-white 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 focus:outline-hidden"
          />
        </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-zinc-300 underline-offset-2 hover:text-zinc-900"
            >Register now</a
          >
        </div>
      </form>
    </div>
  </div>
  <!-- END Form -->

  <!-- Promo Image -->
  <img
    src="https://images.unsplash.com/photo-1567095761054-7a02e69e5c43?q=80&w=900&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Promo Image"
    class="aspect-16/9 h-full w-full object-cover md:aspect-auto"
  />
  <!-- END Promo Image -->
</div>
<!-- END Login box with image -->