Checkout Multi-Step

<div class="ws-checkout mx-auto max-w-2xl">
  <nav aria-label="Checkout steps" class="mb-8">
    <ol class="flex items-center justify-center gap-4 text-sm">
      <li class="flex items-center gap-2">
        <span class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ws-checkout-action-bg)] text-[var(--ws-checkout-action-text)]" aria-hidden="true">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
        </span>
        <span class="font-medium text-[var(--ws-checkout-text)]">Shipping</span>
      </li>
      <span class="h-px w-8 bg-[var(--ws-checkout-border)]" aria-hidden="true"></span>
      <li class="flex items-center gap-2" aria-current="step">
        <span class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--ws-checkout-action-bg)] text-sm font-semibold text-[var(--ws-checkout-action-bg)]">2</span>
        <span class="font-semibold text-[var(--ws-checkout-text)]">Payment</span>
      </li>
      <span class="h-px w-8 bg-[var(--ws-checkout-border)]" aria-hidden="true"></span>
      <li class="flex items-center gap-2">
        <span class="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--ws-checkout-border)] text-sm text-[var(--ws-checkout-text-soft)]">3</span>
        <span class="text-[var(--ws-checkout-text-soft)]">Review</span>
      </li>
    </ol>
  </nav>
  <form class="rounded-xl border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-card-bg)] p-6" aria-label="Payment information">
    <h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Payment Details</h2>
    <div class="mt-6 space-y-4">
      <div>
        <label for="ms-card-number" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Card Number</label>
        <input type="text" id="ms-card-number" name="card-number" autocomplete="cc-number" placeholder="1234 5678 9012 3456" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label for="ms-expiry" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Expiry Date</label>
          <input type="text" id="ms-expiry" name="expiry" autocomplete="cc-exp" placeholder="MM/YY" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
        </div>
        <div>
          <label for="ms-cvv" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">CVV</label>
          <input type="text" id="ms-cvv" name="cvv" autocomplete="cc-csc" placeholder="123" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
        </div>
      </div>
    </div>
    <div class="mt-8 flex justify-between">
      <button type="button" class="rounded-lg border border-[var(--ws-checkout-border)] px-5 py-2.5 text-sm font-medium text-[var(--ws-checkout-text-soft)] transition hover:opacity-80">Previous</button>
      <button type="button" class="rounded-lg bg-[var(--ws-checkout-action-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-checkout-action-text)] transition hover:opacity-90">Next</button>
    </div>
  </form>
</div>