sign in #1

<section>
  <div class="relative px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="max-w-md mx-auto">
      <div class="text-center">
        <h1
          class="text-2xl md:text-3xl lg:text-4xl font-medium tracking-tight text-base-900"
        >
          Magic, but make it login
        </h1>
        <p class="text-base mt-4 text-base-500 text-balance">
          Drop your email below. We'll zap a link to your inbox, no passwords,
          no drama, just login magic.
        </p>
      </div>
      <form class="mt-10 space-y-4">
        <div class="w-full">
          <div class="flex justify-between items-baseline mb-1">
            <label for="email" class="font-medium text-base-500 text-sm"
              >Email Address</label
            >
          </div>
          <div class="relative z-0 focus-within:z-10">
            <div
              class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-arrow-mail size-4 text-base-500"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"
                ></path>
                <path d="M3 7l9 6l9 -6"></path>
              </svg>
            </div>
            <input
              placeholder="you@example.com"
              id="email"
              name="email"
              type="email"
              class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 pl-10 h-10 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-blue-500 focus:ring-accent-100 focus:ring-2 focus:outline-none shadow-sm"
              inputmode="email"
            />
          </div>
        </div>
        <button
          class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 outline outline-accent-500 hover:bg-blue-600 focus:outline-accent-600 shadow-sm h-10 px-6 py-3 text-base rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full"
        >
          Send magic link
        </button>
      </form>
    </div>
  </div>
</section>