Steps

<!--
  Day 63: Steps

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Steps -->
<div
  class="relative mx-auto w-full max-w-4xl rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="rounded-2xl bg-white p-6">
    <nav>
      <ol class="grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-4" role="list">
        <li>
          <a
            href="javascript:void(0)"
            class="flex items-center justify-between gap-2 rounded-xl border border-purple-200 bg-purple-50 px-4.5 py-4 leading-6 text-zinc-800 hover:border-purple-300 active:border-purple-200"
          >
            <div class="grow">
              <div class="text-sm leading-4 font-semibold">Step 1</div>
              <div class="mt-2">Account Setup</div>
            </div>
            <div class="flex-none text-purple-600">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="lucide lucide-check inline-block size-6"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg>
            </div>
          </a>
        </li>
        <li>
          <a
            href="javascript:void(0)"
            class="flex items-center justify-between gap-2 rounded-xl border border-zinc-200 bg-white px-4.5 py-4 leading-6 text-zinc-800 hover:border-purple-300 active:border-zinc-200"
          >
            <div class="grow">
              <div class="text-sm leading-4 font-semibold text-purple-600">
                Step 2
              </div>
              <div class="mt-2">Payment Details</div>
            </div>
            <div class="flex-none text-zinc-200">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="lucide lucide-check inline-block size-6"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg>
            </div>
          </a>
        </li>
        <li>
          <a
            href="javascript:void(0)"
            class="flex items-center justify-between gap-2 rounded-xl border border-zinc-200 bg-white px-4.5 py-4 leading-6 text-zinc-800 hover:border-purple-300 active:border-purple-200"
          >
            <div class="grow">
              <div class="text-sm leading-4 font-semibold">Step 3</div>
              <div class="mt-2">Confirmation</div>
            </div>
            <div class="flex-none text-zinc-200">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="lucide lucide-check inline-block size-6"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg>
            </div>
          </a>
        </li>
      </ol>
    </nav>
  </div>
</div>
<!-- END Steps -->