Multi-step Sign-up

<!--
  Step shell: a labelled progress bar plus step 1 of 3. The bar is a real
  progressbar with aria-valuenow/min/max so it announces "step 1 of 3", not just
  a coloured div. Continue is type="submit"; in a real wizard it validates this
  step before advancing.
-->
<form class="mx-auto w-full max-w-md 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">
  <div class="flex items-center justify-between text-xs font-medium text-gray-500 dark:text-gray-400">
    <span>Step 1 of 3</span>
    <span>Account details</span>
  </div>
  <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="3" aria-label="Sign-up progress">
    <div class="h-full rounded-full bg-blue-600 dark:bg-blue-500" style="width: 33.33%"></div>
  </div>

  <h1 class="mt-6 text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Tell us about you</h1>

  <div class="mt-5 space-y-4">
    <div>
      <label for="sms-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full name</label>
      <input id="sms-name" name="name" type="text" autocomplete="name" required placeholder="Ada Lovelace"
        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="sms-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Work email</label>
      <input id="sms-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>

  <div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-between">
    <button type="button" disabled
      class="inline-flex items-center justify-center rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-semibold text-gray-400 dark:border-gray-700 dark:text-gray-600">
      Back
    </button>
    <button type="submit"
      class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 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">
      Continue
    </button>
  </div>
</form>