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.
141 lines
6.1 KiB
HTML
141 lines
6.1 KiB
HTML
<nav aria-label="Progress">
|
|
<ol role="list" class="overflow-hidden">
|
|
<li class="relative pb-10">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute top-4 left-4 mt-0.5 -ml-px h-full w-0.5 bg-indigo-600"
|
|
></div>
|
|
<!-- Complete Step -->
|
|
<a href="#" class="group relative flex items-start">
|
|
<span class="flex h-9 items-center">
|
|
<span
|
|
class="relative z-10 flex size-8 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800"
|
|
>
|
|
<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>
|
|
</span>
|
|
<span class="ml-4 flex min-w-0 flex-col">
|
|
<span class="text-sm font-medium">Create account</span>
|
|
<span class="text-sm text-gray-500"
|
|
>Vitae sed mi luctus laoreet.</span
|
|
>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="relative pb-10">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute top-4 left-4 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
|
|
></div>
|
|
<!-- Current Step -->
|
|
<a
|
|
href="#"
|
|
aria-current="step"
|
|
class="group relative flex items-start"
|
|
>
|
|
<span aria-hidden="true" class="flex h-9 items-center">
|
|
<span
|
|
class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white"
|
|
>
|
|
<span
|
|
class="size-2.5 rounded-full bg-indigo-600"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="ml-4 flex min-w-0 flex-col">
|
|
<span class="text-sm font-medium text-indigo-600"
|
|
>Profile information</span
|
|
>
|
|
<span class="text-sm text-gray-500"
|
|
>Cursus semper viverra facilisis et et some more.</span
|
|
>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="relative pb-10">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute top-4 left-4 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
|
|
></div>
|
|
<!-- Upcoming Step -->
|
|
<a href="#" class="group relative flex items-start">
|
|
<span aria-hidden="true" class="flex h-9 items-center">
|
|
<span
|
|
class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"
|
|
>
|
|
<span
|
|
class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="ml-4 flex min-w-0 flex-col">
|
|
<span class="text-sm font-medium text-gray-500"
|
|
>Business information</span
|
|
>
|
|
<span class="text-sm text-gray-500"
|
|
>Penatibus eu quis ante.</span
|
|
>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="relative pb-10">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute top-4 left-4 mt-0.5 -ml-px h-full w-0.5 bg-gray-300"
|
|
></div>
|
|
<!-- Upcoming Step -->
|
|
<a href="#" class="group relative flex items-start">
|
|
<span aria-hidden="true" class="flex h-9 items-center">
|
|
<span
|
|
class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"
|
|
>
|
|
<span
|
|
class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="ml-4 flex min-w-0 flex-col">
|
|
<span class="text-sm font-medium text-gray-500">Theme</span>
|
|
<span class="text-sm text-gray-500"
|
|
>Faucibus nec enim leo et.</span
|
|
>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="relative">
|
|
<!-- Upcoming Step -->
|
|
<a href="#" class="group relative flex items-start">
|
|
<span aria-hidden="true" class="flex h-9 items-center">
|
|
<span
|
|
class="relative z-10 flex size-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"
|
|
>
|
|
<span
|
|
class="size-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<span class="ml-4 flex min-w-0 flex-col">
|
|
<span class="text-sm font-medium text-gray-500"
|
|
>Preview</span
|
|
>
|
|
<span class="text-sm text-gray-500"
|
|
>Iusto et officia maiores porro ad non quas.</span
|
|
>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|