Step indicator

<div
  aria-label="progress"
  class="@container"
>
  <ol class="flex space-x-0.5">
    <li class="border-t-8 pr-8 pt-2 w-full border-t-blue-warm-80v">
      <span class="hidden @tablet:block leading-none text-blue-warm-80v">Personal information</span>
      <span class="sr-only">not completed</span>
    </li>
    <li class="border-t-8 pr-8 pt-2 w-full border-t-blue-warm-80v">
      <span class="hidden @tablet:block leading-none text-blue-warm-80v">Household status</span>
      <span class="sr-only">not completed</span>
    </li>
    <li
      class="border-t-8 pr-8 pt-2 w-full border-t-blue-60v"
      aria-current="true"
    >
      <span class="hidden @tablet:block leading-none text-blue-60v font-bold">Supporting documents</span>
    </li>
    <li class="border-t-8 pr-8 pt-2 w-full border-t-gray-40">
      <span class="hidden @tablet:block leading-none text-gray-cool-60">Signature</span>
      <span class="sr-only">completed</span>
    </li>
    <li class="border-t-8 pr-8 pt-2 w-full border-t-gray-40">
      <span class="hidden @tablet:block leading-none text-gray-cool-60">Review and submit</span>
      <span class="sr-only">completed</span>
    </li>
  </ol>
  <div class="mt-4 @tablet:mt-8">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
        <span class="text-blue-60v">of 5</span>
      </span>
      <span class="font-bold pl-2">Supporting documents</span>
    </h4>
  </div>
</div>

<div
  aria-label="progress"
  class="@container"
>
  <ol class="flex space-x-0.5">
    <li class="border-t-8 px-2 pt-2 w-full text-center border-t-blue-warm-80v">
      <span class="hidden @tablet:block leading-none text-blue-warm-80v">Personal information</span>
      <span class="sr-only">not completed</span>
    </li>
    <li class="border-t-8 px-2 pt-2 w-full text-center border-t-blue-warm-80v">
      <span class="hidden @tablet:block leading-none text-blue-warm-80v">Household status</span>
      <span class="sr-only">not completed</span>
    </li>
    <li
      class="border-t-8 px-2 pt-2 w-full text-center border-t-blue-60v"
      aria-current="true"
    >
      <span class="hidden @tablet:block leading-none text-blue-60v font-bold">Supporting documents</span>
    </li>
    <li class="border-t-8 px-2 pt-2 w-full text-center border-t-gray-40">
      <span class="hidden @tablet:block leading-none text-gray-cool-60">Signature</span>
      <span class="sr-only">completed</span>
    </li>
    <li class="border-t-8 px-2 pt-2 w-full text-center border-t-gray-40">
      <span class="hidden @tablet:block leading-none text-gray-cool-60">Review and submit</span>
      <span class="sr-only">completed</span>
    </li>
  </ol>
  <div class="mt-4 @tablet:mt-8">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
        <span class="text-blue-60v">of 5</span>
      </span>
      <span class="font-bold pl-2">Supporting documents</span>
    </h4>
  </div>
</div>

<div
  aria-label="progress"
  class="@container"
>
  <ol class="flex space-x-0.5">
    <li class="relative border-t-8 pr-8 pt-2 w-full @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent
      border-t-blue-warm-80v">
      <div
        class="hidden @tablet:flex size-10 rounded-full items-center justify-center absolute -top-6 outline-white outline-4 bg-blue-warm-80v"
      >
        <span class="font-bold text-white">1</span>
      </div>
      <span class="hidden @tablet:block leading-none text-blue-warm-80v">Personal information</span>
      <span class="sr-only">not completed</span>
    </li>
    <li class="relative border-t-8 pr-8 pt-2 w-full @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent
      border-t-blue-warm-80v">
      <div
        class="hidden @tablet:flex size-10 rounded-full items-center justify-center absolute -top-6 outline-white outline-4 bg-blue-warm-80v"
      >
        <span class="font-bold text-white">2</span>
      </div>
      <span class="hidden @tablet:block leading-none text-blue-warm-80v">Household status</span>
      <span class="sr-only">not completed</span>
    </li>
    <li
      class="relative border-t-8 pr-8 pt-2 w-full @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent
      border-t-blue-60v"
      aria-current="true"
    >
      <div
        class="hidden @tablet:flex size-10 rounded-full items-center justify-center absolute -top-6 outline-white outline-4 bg-blue-60v"
      >
        <span class="font-bold text-white">3</span>
      </div>
      <span class="hidden @tablet:block leading-none text-blue-60v font-bold">Supporting documents</span>
    </li>
    <li class="relative border-t-8 pr-8 pt-2 w-full @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent
      border-t-gray-40">
      <div
        class="hidden @tablet:flex size-10 rounded-full items-center justify-center absolute -top-6 outline-white outline-4 bg-white border-4 border-gray-40"
      >
        <span class="font-bold text-gray-60">4</span>
      </div>
      <span class="hidden @tablet:block leading-none text-gray-cool-60">Signature</span>
      <span class="sr-only">completed</span>
    </li>
    <li class="relative border-t-8 pr-8 pt-2 w-full @tablet:pt-6 @tablet:mt-4 @tablet:last:border-t-transparent
      border-t-gray-40">
      <div
        class="hidden @tablet:flex size-10 rounded-full items-center justify-center absolute -top-6 outline-white outline-4 bg-white border-4 border-gray-40"
      >
        <span class="font-bold text-gray-60">5</span>
      </div>
      <span class="hidden @tablet:block leading-none text-gray-cool-60">Review and submit</span>
      <span class="sr-only">completed</span>
    </li>
  </ol>
  <div class="mt-4 @tablet:mt-8">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
        <span class="text-blue-60v">of 5</span>
      </span>
      <span class="font-bold pl-2">Supporting documents</span>
    </h4>
  </div>
</div>

<div
  aria-label="progress"
  class="@container"
>
  <ol class="flex space-x-0.5">
    <li class="relative border-t-8 pr-8 pt-2 w-full @tablet:mt-2 @tablet:pt-4 @tablet:last:border-t-transparent
      border-t-blue-warm-80v">
      <div
        class="hidden @tablet:flex size-6 rounded-full items-center justify-center absolute -top-4 outline-white outline-4 bg-blue-warm-80v"
      >
        <span class="font-bold text-white">1</span>
      </div>
      <span class="hidden @tablet:block leading-none text-blue-warm-80v">Personal information</span>
      <span class="sr-only">not completed</span>
    </li>
    <li class="relative border-t-8 pr-8 pt-2 w-full @tablet:mt-2 @tablet:pt-4 @tablet:last:border-t-transparent
      border-t-blue-warm-80v">
      <div
        class="hidden @tablet:flex size-6 rounded-full items-center justify-center absolute -top-4 outline-white outline-4 bg-blue-warm-80v"
      >
        <span class="font-bold text-white">2</span>
      </div>
      <span class="hidden @tablet:block leading-none text-blue-warm-80v">Household status</span>
      <span class="sr-only">not completed</span>
    </li>
    <li
      class="relative border-t-8 pr-8 pt-2 w-full @tablet:mt-2 @tablet:pt-4 @tablet:last:border-t-transparent
      border-t-blue-60v"
      aria-current="true"
    >
      <div
        class="hidden @tablet:flex size-6 rounded-full items-center justify-center absolute -top-4 outline-white outline-4 bg-blue-60v"
      >
        <span class="font-bold text-white">3</span>
      </div>
      <span class="hidden @tablet:block leading-none text-blue-60v font-bold">Supporting documents</span>
    </li>
    <li class="relative border-t-8 pr-8 pt-2 w-full @tablet:mt-2 @tablet:pt-4 @tablet:last:border-t-transparent
      border-t-gray-40">
      <div
        class="hidden @tablet:flex size-6 rounded-full items-center justify-center absolute -top-4 outline-white outline-4 bg-white border-4 border-gray-40"
      >
        <span class="font-bold text-gray-60">4</span>
      </div>
      <span class="hidden @tablet:block leading-none text-gray-cool-60">Signature</span>
      <span class="sr-only">completed</span>
    </li>
    <li class="relative border-t-8 pr-8 pt-2 w-full @tablet:mt-2 @tablet:pt-4 @tablet:last:border-t-transparent
      border-t-gray-40">
      <div
        class="hidden @tablet:flex size-6 rounded-full items-center justify-center absolute -top-4 outline-white outline-4 bg-white border-4 border-gray-40"
      >
        <span class="font-bold text-gray-60">5</span>
      </div>
      <span class="hidden @tablet:block leading-none text-gray-cool-60">Review and submit</span>
      <span class="sr-only">completed</span>
    </li>
  </ol>
  <div class="mt-4 @tablet:mt-8">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
        <span class="text-blue-60v">of 5</span>
      </span>
      <span class="font-bold pl-2">Supporting documents</span>
    </h4>
  </div>
</div>

<div aria-label="progress">
  <ol class="flex space-x-0.5">
    <li class="border-t-8 pr-8 pt-2 w-full border-t-blue-warm-80v"></li>
    <li class="border-t-8 pr-8 pt-2 w-full border-t-blue-warm-80v"></li>
    <li
      class="border-t-8 pr-8 pt-2 w-full border-t-blue-60v"
      aria-current="true"
    ></li>
    <li class="border-t-8 pr-8 pt-2 w-full border-t-gray-40"></li>
    <li class="border-t-8 pr-8 pt-2 w-full border-t-gray-40"></li>
  </ol>
  <div class="mt-4">
    <h4 class="text-2xl text-gray-90">
      <span>
        <span class="sr-only">Step</span>
        <span class="size-10 rounded-full bg-blue-60v text-white inline-flex items-center justify-center">3</span>
        <span class="text-blue-60v">of 5</span>
      </span>
      <span class="font-bold pl-2">Supporting documents</span>
    </h4>
  </div>
</div>