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.
104 lines
4.2 KiB
HTML
104 lines
4.2 KiB
HTML
<nav aria-label="Progress">
|
|
<ol role="list" class="flex items-center">
|
|
<li class="relative pr-8 sm:pr-20">
|
|
<!-- Completed Step -->
|
|
<div aria-hidden="true" class="absolute inset-0 flex items-center">
|
|
<div class="h-0.5 w-full bg-indigo-600"></div>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
class="relative flex size-8 items-center justify-center rounded-full bg-indigo-600 hover:bg-indigo-900"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-white"
|
|
>
|
|
<path
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Step 1</span>
|
|
</a>
|
|
</li>
|
|
<li class="relative pr-8 sm:pr-20">
|
|
<!-- Completed Step -->
|
|
<div aria-hidden="true" class="absolute inset-0 flex items-center">
|
|
<div class="h-0.5 w-full bg-indigo-600"></div>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
class="relative flex size-8 items-center justify-center rounded-full bg-indigo-600 hover:bg-indigo-900"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-white"
|
|
>
|
|
<path
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Step 2</span>
|
|
</a>
|
|
</li>
|
|
<li class="relative pr-8 sm:pr-20">
|
|
<!-- Current Step -->
|
|
<div aria-hidden="true" class="absolute inset-0 flex items-center">
|
|
<div class="h-0.5 w-full bg-gray-200"></div>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
aria-current="step"
|
|
class="relative flex size-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="size-2.5 rounded-full bg-indigo-600"
|
|
></span>
|
|
<span class="sr-only">Step 3</span>
|
|
</a>
|
|
</li>
|
|
<li class="relative pr-8 sm:pr-20">
|
|
<!-- Upcoming Step -->
|
|
<div aria-hidden="true" class="absolute inset-0 flex items-center">
|
|
<div class="h-0.5 w-full bg-gray-200"></div>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
class="group relative flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white hover:border-gray-400"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
|
|
></span>
|
|
<span class="sr-only">Step 4</span>
|
|
</a>
|
|
</li>
|
|
<li class="relative">
|
|
<!-- Upcoming Step -->
|
|
<div aria-hidden="true" class="absolute inset-0 flex items-center">
|
|
<div class="h-0.5 w-full bg-gray-200"></div>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
class="group relative flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white hover:border-gray-400"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
|
|
></span>
|
|
<span class="sr-only">Step 5</span>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|