Invite Code Sign-up

<!--
  The invite field uses autocomplete="off" and spellcheck="false" - a random
  code is not a word the browser should dictionary-correct or offer to fill. Its
  monospace font makes O/0 and I/l distinguishable while typing.
-->
<form class="mx-auto w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950" action="#" method="post">
  <h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Join the private beta</h1>
  <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Access is invite-only for now.</p>

  <div class="mt-6 space-y-4">
    <div>
      <label for="sic-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Invite code</label>
      <input id="sic-code" name="inviteCode" type="text" inputmode="text" autocomplete="off" spellcheck="false" required placeholder="XXXX-XXXX-XXXX"
        class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 font-mono text-sm uppercase tracking-widest text-gray-900 shadow-sm placeholder:text-gray-400 placeholder:tracking-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" />
    </div>
    <div>
      <label for="sic-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
      <input id="sic-email" name="email" type="email" autocomplete="email" required placeholder="you@company.com"
        class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" />
    </div>
  </div>

  <button type="submit"
    class="mt-6 inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
    Redeem invite
  </button>

  <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
    No code?
    <a href="#" class="font-semibold text-blue-600 hover:text-blue-500 dark:text-blue-400">Join the waitlist</a>
  </p>
</form>