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.
108 lines
4.3 KiB
HTML
108 lines
4.3 KiB
HTML
<nav aria-label="Progress">
|
|
<ol
|
|
role="list"
|
|
class="divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0"
|
|
>
|
|
<li class="relative md:flex md:flex-1">
|
|
<!-- Completed Step -->
|
|
<a href="#" class="group flex w-full items-center">
|
|
<span class="flex items-center px-6 py-4 text-sm font-medium">
|
|
<span
|
|
class="flex size-10 shrink-0 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="ml-4 text-sm font-medium text-gray-900"
|
|
>Job details</span
|
|
>
|
|
</span>
|
|
</a>
|
|
<!-- Arrow separator for lg screens and up -->
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 hidden h-full w-5 md:block"
|
|
>
|
|
<svg
|
|
viewBox="0 0 22 80"
|
|
fill="none"
|
|
preserveAspectRatio="none"
|
|
class="size-full text-gray-300"
|
|
>
|
|
<path
|
|
d="M0 -2L20 40L0 82"
|
|
stroke="currentcolor"
|
|
vector-effect="non-scaling-stroke"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</li>
|
|
<li class="relative md:flex md:flex-1">
|
|
<!-- Current Step -->
|
|
<a
|
|
href="#"
|
|
aria-current="step"
|
|
class="flex items-center px-6 py-4 text-sm font-medium"
|
|
>
|
|
<span
|
|
class="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-indigo-600"
|
|
>
|
|
<span class="text-indigo-600">02</span>
|
|
</span>
|
|
<span class="ml-4 text-sm font-medium text-indigo-600"
|
|
>Application form</span
|
|
>
|
|
</a>
|
|
<!-- Arrow separator for lg screens and up -->
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 hidden h-full w-5 md:block"
|
|
>
|
|
<svg
|
|
viewBox="0 0 22 80"
|
|
fill="none"
|
|
preserveAspectRatio="none"
|
|
class="size-full text-gray-300"
|
|
>
|
|
<path
|
|
d="M0 -2L20 40L0 82"
|
|
stroke="currentcolor"
|
|
vector-effect="non-scaling-stroke"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</li>
|
|
<li class="relative md:flex md:flex-1">
|
|
<!-- Upcoming Step -->
|
|
<a href="#" class="group flex items-center">
|
|
<span class="flex items-center px-6 py-4 text-sm font-medium">
|
|
<span
|
|
class="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400"
|
|
>
|
|
<span class="text-gray-500 group-hover:text-gray-900"
|
|
>03</span
|
|
>
|
|
</span>
|
|
<span
|
|
class="ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900"
|
|
>Preview</span
|
|
>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|