sign in

              <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-zinc-900"
    >
      Magic, but make it login
    </h1>
    <p class="text-base mt-4 text-zinc-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-zinc-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-zinc-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-zinc-500 ring-1 ring-zinc-200 placeholder-zinc-400 focus:border-blue-500 focus:ring-blue-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:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-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>