Boxed Logo Sign-up

<!--
  The logo is a boxed CSS mark, not an <img>: no external asset to preload or let
  rot. It is aria-hidden and the brand name sits beside it as real text, so a
  screen reader hears the name once, not "image" plus the name.
-->
<div class="mx-auto w-full max-w-sm">
  <div class="mb-6 flex flex-col items-center">
    <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-600 to-indigo-600 text-lg font-bold text-white shadow-sm" aria-hidden="true">A</span>
    <span class="mt-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Acme</span>
  </div>

  <form class="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-center text-lg font-bold tracking-tight text-gray-900 dark:text-gray-100">Create your account</h1>

    <div class="mt-6 space-y-4">
      <div>
        <label for="sbl-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
        <input id="sbl-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>
        <label for="sbl-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input id="sbl-password" name="password" type="password" autocomplete="new-password" required placeholder="At least 8 characters"
          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">
      Create account
    </button>

    <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
      Already have an account?
      <a href="#" class="font-semibold text-blue-600 hover:text-blue-500 dark:text-blue-400">Sign in</a>
    </p>
  </form>
</div>