You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.3 KiB
HTML
50 lines
1.3 KiB
HTML
<nav aria-label="Progress" class="flex items-center justify-center">
|
|
<p class="text-sm font-medium">Step 2 of 4</p>
|
|
<ol role="list" class="ml-8 flex items-center space-x-5">
|
|
<li>
|
|
<!-- Completed Step -->
|
|
<a
|
|
href="#"
|
|
class="block size-2.5 rounded-full bg-indigo-600 hover:bg-indigo-900"
|
|
>
|
|
<span class="sr-only">Step 1</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<!-- Current Step -->
|
|
<a
|
|
href="#"
|
|
aria-current="step"
|
|
class="relative flex items-center justify-center"
|
|
>
|
|
<span aria-hidden="true" class="absolute flex size-5 p-px">
|
|
<span class="size-full rounded-full bg-indigo-200"></span>
|
|
</span>
|
|
<span
|
|
aria-hidden="true"
|
|
class="relative block size-2.5 rounded-full bg-indigo-600"
|
|
></span>
|
|
<span class="sr-only">Step 2</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<!-- Upcoming Step -->
|
|
<a
|
|
href="#"
|
|
class="block size-2.5 rounded-full bg-gray-200 hover:bg-gray-400"
|
|
>
|
|
<span class="sr-only">Step 3</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<!-- Upcoming Step -->
|
|
<a
|
|
href="#"
|
|
class="block size-2.5 rounded-full bg-gray-200 hover:bg-gray-400"
|
|
>
|
|
<span class="sr-only">Step 4</span>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|