Stepper

<div
  class="flex w-full max-w-xl flex-col items-center justify-center gap-2 sm:flex-row"
>
  <!-- /* ------------------------------ Current Step ------------------------------ */ -->
  <div class="flex w-full flex-col items-center gap-2 sm:flex-row">
    <button
      class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-main-text bg-surface text-sm"
    >
      1
    </button>
    <div class="h-8 w-px bg-main-border sm:h-px sm:w-full sm:max-w-40"></div>
  </div>
 
  <div class="flex w-full flex-col items-center gap-2 sm:flex-row">
    <button
      class="text-muted-text flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-sm"
    >
      2
    </button>
    <div class="h-8 w-px bg-main-border sm:h-px sm:w-full sm:max-w-40"></div>
  </div>
  <div class="flex w-full flex-col items-center gap-2 sm:flex-row">
    <button
      class="text-muted-text flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-sm"
    >
      3
    </button>
    <div class="h-8 w-px bg-main-border sm:h-px sm:w-full sm:max-w-40"></div>
  </div>
 
  <div class="flex w-full flex-col items-center gap-2 sm:flex-row">
    <button
      class="text-muted-text flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-sm"
    >
      4
    </button>
    <div class="h-8 w-px bg-main-border sm:h-px sm:w-full sm:max-w-40"></div>
  </div>
 
  <div class="flex flex-col items-center gap-2 sm:flex-row">
    <button
      class="text-muted-text flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-sm"
    >
      5
    </button>
  </div>
</div>

<div
  class="flex w-full max-w-xl flex-col items-center justify-center gap-2 sm:flex-row"
>
  <!-- /* ------------------------------- Active Step ------------------------------ */ -->
  <div class="flex w-full flex-col items-center gap-2 sm:flex-row">
    <button
      class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-main-text bg-main-text text-sm text-main"
    >
      1
    </button>
    <div class="h-8 w-px bg-main-text sm:h-px sm:w-full sm:max-w-40"></div>
  </div>
 
  <!-- /* ------------------------------ Current Step ------------------------------ */ -->
  <div class="flex w-full flex-col items-center gap-2 sm:flex-row">
    <button
      class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-main-text bg-surface text-sm"
    >
      2
    </button>
    <div class="h-8 w-px bg-main-border sm:h-px sm:w-full sm:max-w-40"></div>
  </div>
 
  <div class="flex w-full flex-col items-center gap-2 sm:flex-row">
    <button
      class="text-muted-text flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-sm"
    >
      3
    </button>
    <div class="h-8 w-px bg-main-border sm:h-px sm:w-full sm:max-w-40"></div>
  </div>
 
  <div class="flex w-full flex-col items-center gap-2 sm:flex-row">
    <button
      class="text-muted-text flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-sm"
    >
      4
    </button>
    <div class="h-8 w-px bg-main-border sm:h-px sm:w-full sm:max-w-40"></div>
  </div>
 
  <div class="flex flex-col items-center gap-2 sm:flex-row">
    <button
      class="text-muted-text flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-sm"
    >
      5
    </button>
  </div>
</div>