Guest Checkout Form

<!--
  Guest checkout: one email field, a primary "continue as guest", and a route to
  sign in for people who have an account. The "email me a receipt" line is why the
  field is type="email" with autocomplete - the address is the only thing a guest
  order truly needs. Removing the sign-in step is the whole point; don't bury the
  guest button under an account wall.
-->
<form class="w-full max-w-sm space-y-4 rounded-2xl border border-gray-200 bg-white p-5 sm:p-6 dark:border-gray-800 dark:bg-gray-950" action="#" method="post" novalidate>
  <div>
    <h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Checkout as guest</h2>
    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">We'll email your receipt and order updates here.</p>
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="gf-email">Email address</label>
    <input class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 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" id="gf-email" name="email" type="email" autocomplete="email" inputmode="email" placeholder="you@example.com" required />
  </div>
  <button class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-3 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" type="submit">Continue as guest</button>
  <div class="flex items-center gap-3" role="separator" aria-label="or">
    <span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
    <span class="text-xs font-medium uppercase tracking-wide text-gray-400 dark:text-gray-500">or</span>
    <span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
  </div>
  <a class="inline-flex w-full items-center justify-center rounded-lg border border-gray-300 px-5 py-3 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-100 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:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" href="#">Sign in to your account</a>
</form>