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.
tailwind-ai/application_ui/headings/page_headings/with_actions_and_breadcrumb...

107 lines
4.4 KiB
HTML

<div>
<div>
<nav aria-label="Back" class="sm:hidden">
<a
href="#"
class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700"
>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="mr-1 -ml-1 size-5 shrink-0 text-gray-400"
>
<path
d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
Back
</a>
</nav>
<nav aria-label="Breadcrumb" class="hidden sm:flex">
<ol role="list" class="flex items-center space-x-4">
<li>
<div class="flex">
<a
href="#"
class="text-sm font-medium text-gray-500 hover:text-gray-700"
>Jobs</a
>
</div>
</li>
<li>
<div class="flex items-center">
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5 shrink-0 text-gray-400"
>
<path
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
<a
href="#"
class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
>Engineering</a
>
</div>
</li>
<li>
<div class="flex items-center">
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5 shrink-0 text-gray-400"
>
<path
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
<a
href="#"
aria-current="page"
class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
>Back End Developer</a
>
</div>
</li>
</ol>
</nav>
</div>
<div class="mt-2 md:flex md:items-center md:justify-between">
<div class="min-w-0 flex-1">
<h2
class="text-2xl/7 font-bold text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight"
>
Back End Developer
</h2>
</div>
<div class="mt-4 flex shrink-0 md:mt-0 md:ml-4">
<button
type="button"
class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
>
Edit
</button>
<button
type="button"
class="ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Publish
</button>
</div>
</div>
</div>