More items
parent
3f89178cff
commit
b59bd7508e
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,27 @@
|
||||
<label for="location" class="block text-sm/6 font-medium text-gray-900"
|
||||
>Location</label
|
||||
>
|
||||
<div class="mt-2 grid grid-cols-1">
|
||||
<select
|
||||
id="location"
|
||||
name="location"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6"
|
||||
>
|
||||
<option>United States</option>
|
||||
<option selected>Canada</option>
|
||||
<option>Mexico</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
@ -0,0 +1,61 @@
|
||||
<nav aria-label="Breadcrumb" class="flex">
|
||||
<ol role="list" class="flex space-x-4 rounded-md bg-white px-6 shadow-sm">
|
||||
<li class="flex">
|
||||
<div class="flex items-center">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-500">
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Home</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
viewBox="0 0 24 44"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="none"
|
||||
aria-hidden="true"
|
||||
class="h-full w-6 shrink-0 text-gray-200"
|
||||
>
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Projects</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
viewBox="0 0 24 44"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="none"
|
||||
aria-hidden="true"
|
||||
class="h-full w-6 shrink-0 text-gray-200"
|
||||
>
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Project Nero</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
@ -0,0 +1,64 @@
|
||||
<nav aria-label="Breadcrumb" class="flex border-b border-gray-200 bg-white">
|
||||
<ol
|
||||
role="list"
|
||||
class="mx-auto flex w-full max-w-(--breakpoint-xl) space-x-4 px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
<li class="flex">
|
||||
<div class="flex items-center">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-500">
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Home</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
viewBox="0 0 24 44"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="none"
|
||||
aria-hidden="true"
|
||||
class="h-full w-6 shrink-0 text-gray-200"
|
||||
>
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Projects</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
viewBox="0 0 24 44"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="none"
|
||||
aria-hidden="true"
|
||||
class="h-full w-6 shrink-0 text-gray-200"
|
||||
>
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Project Nero</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
@ -0,0 +1,59 @@
|
||||
<nav aria-label="Breadcrumb" class="flex">
|
||||
<ol role="list" class="flex items-center space-x-4">
|
||||
<li>
|
||||
<div>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-500">
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Home</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="size-5 shrink-0 text-gray-300"
|
||||
>
|
||||
<path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Projects</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="size-5 shrink-0 text-gray-300"
|
||||
>
|
||||
<path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
|
||||
</svg>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Project Nero</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
@ -0,0 +1,69 @@
|
||||
<nav aria-label="Breadcrumb" class="flex">
|
||||
<ol role="list" class="flex items-center space-x-4">
|
||||
<li>
|
||||
<div>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-500">
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Home</span>
|
||||
</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"
|
||||
>Projects</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"
|
||||
>Project Nero</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
@ -0,0 +1,694 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
|
||||
>
|
||||
Open command palette
|
||||
</button>
|
||||
|
||||
<el-dialog>
|
||||
<dialog id="dialog" class="backdrop:bg-transparent">
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="mx-auto block max-w-2xl transform overflow-hidden rounded-xl bg-gray-900 shadow-2xl transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
>
|
||||
<el-command-palette>
|
||||
<div class="grid grid-cols-1 border-b border-gray-500/20">
|
||||
<input
|
||||
type="text"
|
||||
autofocus
|
||||
placeholder="Search..."
|
||||
class="col-start-1 row-start-1 h-12 w-full bg-transparent pr-4 pl-11 text-base text-white outline-hidden placeholder:text-gray-500 sm:text-sm"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-command-list
|
||||
class="block max-h-80 scroll-py-2 overflow-y-auto"
|
||||
>
|
||||
<el-defaults class="block divide-y divide-gray-500/20">
|
||||
<div class="p-2">
|
||||
<h2
|
||||
class="mt-4 mb-2 px-3 text-xs font-semibold text-gray-200"
|
||||
>
|
||||
Recent searches
|
||||
</h2>
|
||||
<div class="text-sm text-gray-400">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Website
|
||||
Redesign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2">
|
||||
<h2 class="sr-only">Quick actions</h2>
|
||||
<div class="text-sm text-gray-400">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add new file...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-400"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">N</kbd>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add new folder...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-400"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">F</kbd>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add hashtag...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-400"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">H</kbd>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6 6h.008v.008H6V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add label...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-400"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">L</kbd>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-defaults>
|
||||
|
||||
<el-command-group
|
||||
hidden
|
||||
class="block p-2 text-sm text-gray-400"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Website Redesign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Open Graph Image</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Logo Design</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Advertising Campaign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / TV Ad Campaign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Mobile App</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Product Design</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Intranet</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Custom
|
||||
Programming</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC / Creative Writing</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC / Animation</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC / Product
|
||||
Illustration</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Video Production</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Print Brochure</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-800 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-500 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Documentation</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-400 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
</el-command-group>
|
||||
</el-command-list>
|
||||
|
||||
<el-no-results
|
||||
hidden
|
||||
class="block px-6 py-14 text-center sm:px-14"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-6 text-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-4 text-sm text-gray-200">
|
||||
We couldn't find any projects with that term. Please
|
||||
try again.
|
||||
</p>
|
||||
</el-no-results>
|
||||
</el-command-palette>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,694 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
|
||||
>
|
||||
Open command palette
|
||||
</button>
|
||||
|
||||
<el-dialog>
|
||||
<dialog id="dialog" class="backdrop:bg-transparent">
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="mx-auto block max-w-2xl transform overflow-hidden rounded-xl bg-white/80 shadow-2xl ring-1 ring-black/5 backdrop-blur-sm backdrop-filter transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
>
|
||||
<el-command-palette>
|
||||
<div class="grid grid-cols-1 border-b border-gray-500/10">
|
||||
<input
|
||||
type="text"
|
||||
autofocus
|
||||
placeholder="Search..."
|
||||
class="col-start-1 row-start-1 h-12 w-full bg-transparent pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-500 sm:text-sm"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-900/40"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-command-list
|
||||
class="block max-h-80 scroll-py-2 overflow-y-auto"
|
||||
>
|
||||
<el-defaults class="block divide-y divide-gray-500/10">
|
||||
<div class="p-2">
|
||||
<h2
|
||||
class="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900"
|
||||
>
|
||||
Recent searches
|
||||
</h2>
|
||||
<div class="text-sm text-gray-700">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Website
|
||||
Redesign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2">
|
||||
<h2 class="sr-only">Quick actions</h2>
|
||||
<div class="text-sm text-gray-700">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add new file...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-500"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">N</kbd>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add new folder...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-500"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">F</kbd>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add hashtag...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-500"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">H</kbd>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6 6h.008v.008H6V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add label...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-500"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">L</kbd>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-defaults>
|
||||
|
||||
<el-command-group
|
||||
hidden
|
||||
class="block p-2 text-sm text-gray-700"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Website Redesign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Open Graph Image</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Logo Design</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Advertising Campaign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / TV Ad Campaign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Mobile App</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Product Design</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Intranet</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Custom
|
||||
Programming</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC / Creative Writing</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC / Animation</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC / Product
|
||||
Illustration</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Video Production</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Print Brochure</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-gray-900/5 aria-selected:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-900/40 group-aria-selected:text-gray-900"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Documentation</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-gray-500 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
</el-command-group>
|
||||
</el-command-list>
|
||||
|
||||
<el-no-results
|
||||
hidden
|
||||
class="block px-6 py-14 text-center sm:px-14"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-6 text-gray-900/40"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-4 text-sm text-gray-900">
|
||||
We couldn't find any projects with that term. Please
|
||||
try again.
|
||||
</p>
|
||||
</el-no-results>
|
||||
</el-command-palette>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,218 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
|
||||
>
|
||||
Open command palette
|
||||
</button>
|
||||
|
||||
<el-dialog>
|
||||
<dialog id="dialog" class="backdrop:bg-transparent">
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
>
|
||||
<el-command-palette>
|
||||
<div class="grid grid-cols-1 border-b border-gray-100">
|
||||
<input
|
||||
type="text"
|
||||
autofocus
|
||||
placeholder="Search..."
|
||||
class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-command-list
|
||||
hidden
|
||||
class="block max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-gray-800"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Leslie Alexander</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Michael Foster</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Dries Vincent</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Lindsay Walton</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Courtney Henry</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Tom Cook</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Whitney Francis</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Leonard Krasner</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Floyd Miles</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Emily Selman</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Kristin Watson</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Emma Dorsey</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Alicia Bell</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Jenny Wilson</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Anna Roberts</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Benjamin Russel</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Jeffrey Webb</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Kathryn Murphy</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Lawrence Hunter</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Yvette Armstrong</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Angela Fisher</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Blake Reid</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Hector Gibbons</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Fabricio Mendes</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Jillian Steward</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Chelsea Hagon</a
|
||||
>
|
||||
</el-command-list>
|
||||
|
||||
<el-no-results
|
||||
hidden
|
||||
class="block p-4 text-sm text-gray-500"
|
||||
>No people found.</el-no-results
|
||||
>
|
||||
</el-command-palette>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,221 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
|
||||
>
|
||||
Open command palette
|
||||
</button>
|
||||
|
||||
<el-dialog>
|
||||
<dialog id="dialog" class="backdrop:bg-transparent">
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="mx-auto block max-w-xl transform rounded-xl bg-white p-2 shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
>
|
||||
<el-command-palette>
|
||||
<input
|
||||
type="text"
|
||||
autofocus
|
||||
placeholder="Search..."
|
||||
class="w-full rounded-md bg-gray-100 px-4 py-2.5 text-gray-900 outline-hidden placeholder:text-gray-500 sm:text-sm"
|
||||
/>
|
||||
|
||||
<el-command-list
|
||||
hidden
|
||||
class="-mb-2 block max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-gray-800"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Leslie Alexander</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Michael Foster</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Dries Vincent</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Lindsay Walton</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Courtney Henry</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Tom Cook</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Whitney Francis</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Leonard Krasner</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Floyd Miles</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Emily Selman</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Kristin Watson</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Emma Dorsey</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Alicia Bell</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Jenny Wilson</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Anna Roberts</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Benjamin Russel</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Jeffrey Webb</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Kathryn Murphy</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Lawrence Hunter</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Yvette Armstrong</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Angela Fisher</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Blake Reid</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Hector Gibbons</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Fabricio Mendes</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Jillian Steward</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="block cursor-default rounded-md px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Chelsea Hagon</a
|
||||
>
|
||||
</el-command-list>
|
||||
|
||||
<el-no-results
|
||||
hidden
|
||||
class="block px-4 py-14 text-center sm:px-14"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-6 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-4 text-sm text-gray-900">
|
||||
No people found using that search term.
|
||||
</p>
|
||||
</el-no-results>
|
||||
</el-command-palette>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,978 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<script type="module">
|
||||
function onReady() {
|
||||
let command = document.getElementById("command");
|
||||
|
||||
command.querySelector("input").addEventListener("input", (event) => {
|
||||
let value = event.target.value;
|
||||
if (value === "?") {
|
||||
command.dataset.mode = "help";
|
||||
} else if (value.startsWith("#")) {
|
||||
command.dataset.mode = "project";
|
||||
} else if (value.startsWith(">")) {
|
||||
command.dataset.mode = "user";
|
||||
} else {
|
||||
delete command.dataset.mode;
|
||||
}
|
||||
});
|
||||
|
||||
command.setFilterCallback(({ query, node, content }) => {
|
||||
if (query === "?") {
|
||||
return false;
|
||||
}
|
||||
if (query.startsWith("#")) {
|
||||
return (
|
||||
node.dataset.type === "project" &&
|
||||
content.toLowerCase().includes(query.slice(1).toLowerCase())
|
||||
);
|
||||
}
|
||||
if (query.startsWith(">")) {
|
||||
return (
|
||||
node.dataset.type === "user" &&
|
||||
content.toLowerCase().includes(query.slice(1).toLowerCase())
|
||||
);
|
||||
}
|
||||
return content.toLowerCase().includes(query.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
if (customElements.get("el-command")) {
|
||||
onReady();
|
||||
} else {
|
||||
window.addEventListener("elements:ready", onReady);
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
|
||||
>
|
||||
Open command palette
|
||||
</button>
|
||||
|
||||
<el-dialog>
|
||||
<dialog id="dialog" class="backdrop:bg-transparent">
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
>
|
||||
<el-command-palette
|
||||
id="command"
|
||||
class="divide-y divide-gray-100"
|
||||
>
|
||||
<div class="grid grid-cols-1">
|
||||
<input
|
||||
type="text"
|
||||
autofocus
|
||||
placeholder="Search..."
|
||||
class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-command-list
|
||||
hidden
|
||||
class="flex max-h-80 transform-gpu scroll-py-10 scroll-pb-2 flex-col gap-4 overflow-y-auto p-4 pb-2"
|
||||
>
|
||||
<el-command-group
|
||||
hidden
|
||||
aria-labelledby="projects-label"
|
||||
>
|
||||
<h2
|
||||
id="projects-label"
|
||||
class="text-xs font-semibold text-gray-900"
|
||||
>
|
||||
Projects
|
||||
</h2>
|
||||
<div class="-mx-4 mt-2 text-sm text-gray-700">
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Website Redesign</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Open Graph Image</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Logo Design</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Advertising
|
||||
Campaign</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / TV Ad
|
||||
Campaign</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Mobile App</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Product
|
||||
Design</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Intranet</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Custom
|
||||
Programming</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC. / Creative
|
||||
Writing</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC. / Animation</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC. / Product
|
||||
Illustration</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Video Production</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Print Brochure</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="project"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Documentation</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</el-command-group>
|
||||
|
||||
<el-command-group hidden aria-labelledby="users-label">
|
||||
<h2
|
||||
id="users-label"
|
||||
class="text-xs font-semibold text-gray-900"
|
||||
>
|
||||
Users
|
||||
</h2>
|
||||
<div class="-mx-4 mt-2 text-sm text-gray-700">
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Leslie Alexander</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Michael Foster</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Dries Vincent</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Lindsay Walton</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Courtney Henry</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Tom Cook</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Whitney Francis</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Leonard Krasner</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Floyd Miles</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Emily Selman</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Kristin Watson</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Emma Dorsey</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Alicia Bell</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Jenny Wilson</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Anna Roberts</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Benjamin Russel</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Jeffrey Webb</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Kathryn Murphy</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Lawrence Hunter</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1506980595904-70325b7fdd90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Yvette Armstrong</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Angela Fisher</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Blake Reid</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Hector Gibbons</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Fabricio Mendes</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Jillian Steward</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
data-type="user"
|
||||
class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-6 flex-none rounded-full"
|
||||
/>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Chelsea Hagon</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</el-command-group>
|
||||
</el-command-list>
|
||||
|
||||
<div
|
||||
class="hidden px-6 py-14 text-center text-sm in-data-[mode=help]:block sm:px-14"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-6 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M16.712 4.33a9.027 9.027 0 0 1 1.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 0 0-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 0 1 0 9.424m-4.138-5.976a3.736 3.736 0 0 0-.88-1.388 3.737 3.737 0 0 0-1.388-.88m2.268 2.268a3.765 3.765 0 0 1 0 2.528m-2.268-4.796a3.765 3.765 0 0 0-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 0 1-1.388.88m2.268-2.268 4.138 3.448m0 0a9.027 9.027 0 0 1-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0-3.448-4.138m3.448 4.138a9.014 9.014 0 0 1-9.424 0m5.976-4.138a3.765 3.765 0 0 1-2.528 0m0 0a3.736 3.736 0 0 1-1.388-.88 3.737 3.737 0 0 1-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 0 1-1.652-1.306 9.027 9.027 0 0 1-1.306-1.652m0 0 4.138-3.448M4.33 16.712a9.014 9.014 0 0 1 0-9.424m4.138 5.976a3.765 3.765 0 0 1 0-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 0 1 1.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 0 0-1.652 1.306A9.025 9.025 0 0 0 4.33 7.288"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-4 font-semibold text-gray-900">
|
||||
Help with searching
|
||||
</p>
|
||||
<p class="mt-2 text-gray-500">
|
||||
Use this tool to quickly search for users and
|
||||
projects across our entire platform. You can also
|
||||
use the search modifiers found in the footer below
|
||||
to limit the results to just users or projects.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<el-no-results
|
||||
hidden
|
||||
class="block px-6 py-14 text-center text-sm in-data-[mode=help]:hidden sm:px-14"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-6 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-4 font-semibold text-gray-900">
|
||||
No results found
|
||||
</p>
|
||||
<p class="mt-2 text-gray-500">
|
||||
We couldn't find anything with that term. Please try
|
||||
again.
|
||||
</p>
|
||||
</el-no-results>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap items-center bg-gray-50 px-4 py-2.5 text-xs text-gray-700"
|
||||
>
|
||||
Type
|
||||
<kbd
|
||||
class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=project]:border-indigo-600 in-data-[mode=project]:text-indigo-600 sm:mx-2"
|
||||
>#</kbd
|
||||
>
|
||||
<span class="sm:hidden">for projects,</span
|
||||
><span class="hidden sm:inline"
|
||||
>to access projects,</span
|
||||
><kbd
|
||||
class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=user]:border-indigo-600 in-data-[mode=user]:text-indigo-600 sm:mx-2"
|
||||
>></kbd
|
||||
>
|
||||
for users, and
|
||||
<kbd
|
||||
class="mx-1 flex size-5 items-center justify-center rounded-sm border border-gray-400 bg-white font-semibold text-gray-900 in-data-[mode=help]:border-indigo-600 in-data-[mode=help]:text-indigo-600 sm:mx-2"
|
||||
>?</kbd
|
||||
>
|
||||
for help.
|
||||
</div>
|
||||
</el-command-palette>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,241 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
|
||||
>
|
||||
Open command palette
|
||||
</button>
|
||||
|
||||
<el-dialog>
|
||||
<dialog id="dialog" class="backdrop:bg-transparent">
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in data-closed:sm:translate-y-0 data-closed:sm:scale-95"
|
||||
>
|
||||
<el-command-palette>
|
||||
<div class="grid grid-cols-1">
|
||||
<input
|
||||
type="text"
|
||||
autofocus
|
||||
placeholder="Search..."
|
||||
class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-defaults
|
||||
class="block border-t border-gray-100 px-6 py-14 text-center text-sm sm:px-14"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-6 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="m6.115 5.19.319 1.913A6 6 0 0 0 8.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 0 0 2.288-4.042 1.087 1.087 0 0 0-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 0 1-.98-.314l-.295-.295a1.125 1.125 0 0 1 0-1.591l.13-.132a1.125 1.125 0 0 1 1.3-.21l.603.302a.809.809 0 0 0 1.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 0 0 1.528-1.732l.146-.292M6.115 5.19A9 9 0 1 0 17.18 4.64M6.115 5.19A8.965 8.965 0 0 1 12 3c1.929 0 3.716.607 5.18 1.64"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-4 font-semibold text-gray-900">
|
||||
Search for clients and projects
|
||||
</p>
|
||||
<p class="mt-2 text-gray-500">
|
||||
Quickly access clients and projects by running a
|
||||
global search.
|
||||
</p>
|
||||
</el-defaults>
|
||||
|
||||
<el-command-list
|
||||
hidden
|
||||
class="block max-h-80 scroll-pt-11 scroll-pb-2 space-y-2 overflow-y-auto pb-2"
|
||||
>
|
||||
<el-command-group
|
||||
hidden
|
||||
aria-labelledby="clients-label"
|
||||
class="block"
|
||||
>
|
||||
<div
|
||||
id="clients-label"
|
||||
class="bg-gray-100 px-4 py-2.5 text-xs font-semibold text-gray-900"
|
||||
>
|
||||
Clients
|
||||
</div>
|
||||
<div class="mt-2 text-sm text-gray-800">
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Workflow Inc.</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Multinational LLC.</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Products Inc.</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Conglomerate Inc.</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Big Ltd.</a
|
||||
>
|
||||
</div>
|
||||
</el-command-group>
|
||||
|
||||
<el-command-group
|
||||
hidden
|
||||
aria-labelledby="projects-label"
|
||||
class="block"
|
||||
>
|
||||
<div
|
||||
id="projects-label"
|
||||
class="bg-gray-100 px-4 py-2.5 text-xs font-semibold text-gray-900"
|
||||
>
|
||||
Projects
|
||||
</div>
|
||||
<div class="mt-2 text-sm text-gray-800">
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Workflow Inc. / Website Redesign</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Workflow Inc. / Open Graph Image</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Workflow Inc. / Logo Design</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Workflow Inc. / Advertising Campaign</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Conglomerate Inc. / TV Ad Campaign</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Conglomerate Inc. / Mobile App</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Conglomerate Inc. / Product Design</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Conglomerate Inc. / Intranet</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Conglomerate Inc. / Custom Programming</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Multinational LLC. / Creative Writing</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Multinational LLC. / Animation</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Multinational LLC. / Product
|
||||
Illustration</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Products Inc. / Video Production</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Products Inc. / Print Brochure</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block cursor-default px-4 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>Products Inc. / Documentation</a
|
||||
>
|
||||
</div>
|
||||
</el-command-group>
|
||||
</el-command-list>
|
||||
|
||||
<el-no-results
|
||||
hidden
|
||||
class="block border-t border-gray-100 px-6 py-14 text-center text-sm sm:px-14"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-6 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-4 font-semibold text-gray-900">
|
||||
No results found
|
||||
</p>
|
||||
<p class="mt-2 text-gray-500">
|
||||
We couldn't find anything with that term. Please try
|
||||
again.
|
||||
</p>
|
||||
</el-no-results>
|
||||
</el-command-palette>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,694 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
|
||||
>
|
||||
Open command palette
|
||||
</button>
|
||||
|
||||
<el-dialog>
|
||||
<dialog id="dialog" class="backdrop:bg-transparent">
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="mx-auto block max-w-2xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
>
|
||||
<el-command-palette>
|
||||
<div class="grid grid-cols-1 border-b border-gray-100">
|
||||
<input
|
||||
type="text"
|
||||
autofocus
|
||||
placeholder="Search..."
|
||||
class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-command-list
|
||||
class="block max-h-80 scroll-py-2 overflow-y-auto"
|
||||
>
|
||||
<el-defaults class="block divide-y divide-gray-100">
|
||||
<div class="p-2">
|
||||
<h2
|
||||
class="mt-4 mb-2 px-3 text-xs font-semibold text-gray-500"
|
||||
>
|
||||
Recent searches
|
||||
</h2>
|
||||
<div class="text-sm text-gray-700">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Website
|
||||
Redesign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2">
|
||||
<h2 class="sr-only">Quick actions</h2>
|
||||
<div class="text-sm text-gray-700">
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add new file...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-400 group-aria-selected:text-indigo-100"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">N</kbd>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add new folder...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-400 group-aria-selected:text-indigo-100"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">F</kbd>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add hashtag...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-400 group-aria-selected:text-indigo-100"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">H</kbd>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6 6h.008v.008H6V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Add label...</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 flex-none text-xs font-semibold text-gray-400 group-aria-selected:text-indigo-100"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd
|
||||
><kbd class="font-sans">L</kbd>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-defaults>
|
||||
|
||||
<el-command-group
|
||||
hidden
|
||||
class="block p-2 text-sm text-gray-700"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Website Redesign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Open Graph Image</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Logo Design</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Workflow Inc. / Advertising Campaign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / TV Ad Campaign</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Mobile App</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Product Design</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Intranet</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Conglomerate Inc. / Custom
|
||||
Programming</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC / Creative Writing</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC / Animation</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Multinational LLC / Product
|
||||
Illustration</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Video Production</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Print Brochure</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
class="group flex cursor-default items-center rounded-md px-3 py-2 select-none focus:outline-hidden aria-selected:bg-indigo-600 aria-selected:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 flex-none text-gray-400 group-aria-selected:text-white forced-colors:group-aria-selected:text-[Highlight]"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-3 flex-auto truncate"
|
||||
>Products Inc. / Documentation</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-3 hidden flex-none text-indigo-100 group-aria-selected:inline"
|
||||
>Jump to...</span
|
||||
>
|
||||
</a>
|
||||
</el-command-group>
|
||||
</el-command-list>
|
||||
|
||||
<el-no-results
|
||||
hidden
|
||||
class="block px-6 py-14 text-center sm:px-14"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-6 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-4 text-sm text-gray-900">
|
||||
We couldn't find any projects with that term. Please
|
||||
try again.
|
||||
</p>
|
||||
</el-no-results>
|
||||
</el-command-palette>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,480 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
|
||||
>
|
||||
Open command palette
|
||||
</button>
|
||||
|
||||
<el-dialog>
|
||||
<dialog id="dialog" class="backdrop:bg-transparent">
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
>
|
||||
<el-command-palette>
|
||||
<div class="grid grid-cols-1 border-b border-gray-100">
|
||||
<input
|
||||
type="text"
|
||||
autofocus
|
||||
placeholder="Search..."
|
||||
class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-command-list
|
||||
hidden
|
||||
class="block max-h-96 transform-gpu scroll-py-3 overflow-y-auto p-3"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-1-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-indigo-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-1-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
Text
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add freeform text with basic formatting
|
||||
options.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-2-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-blue-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-2-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
Video
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add a video from YouTube, Vimeo or other
|
||||
services.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-3-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-violet-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-3-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
Page
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add a new blank page to your project.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-4-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-sky-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-4-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
List
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add an ordered or unordered list.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-5-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-pink-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-5-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
Board
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add a kanban style board with cards and
|
||||
columns.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-6-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-teal-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-6-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
Calendar
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add a full month calendar or a week view
|
||||
calendar.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-7-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-cyan-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-7-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
Table
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add a table for displaying larger sets of
|
||||
data.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-8-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-fuchsia-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-8-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
Link
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add a link to another page, website, or
|
||||
email address.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-9-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-purple-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-9-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
Code
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add raw HTML, JavaScript or CSS code.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
hidden
|
||||
aria-labelledby="item-10-label"
|
||||
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg bg-rose-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-white"
|
||||
>
|
||||
<path
|
||||
d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex-auto">
|
||||
<p
|
||||
id="item-10-label"
|
||||
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
||||
>
|
||||
Image
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
||||
>
|
||||
Add a simple image or a photo gallery.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</el-command-list>
|
||||
|
||||
<el-no-results
|
||||
hidden
|
||||
class="block px-6 py-14 text-center text-sm sm:px-14"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-6 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-4 font-semibold text-gray-900">
|
||||
No results found
|
||||
</p>
|
||||
<p class="mt-2 text-gray-500">
|
||||
No components found for this search term. Please try
|
||||
again.
|
||||
</p>
|
||||
</el-no-results>
|
||||
</el-command-palette>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,250 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<nav class="bg-gray-800">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 justify-between">
|
||||
<div class="flex">
|
||||
<div class="mr-2 -ml-2 flex items-center md:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="hidden md:ml-6 md:flex md:items-center md:space-x-4"
|
||||
>
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex items-center gap-x-1.5 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="-ml-0.5 size-5"
|
||||
>
|
||||
<path
|
||||
d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
|
||||
/>
|
||||
</svg>
|
||||
New Job
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden md:ml-4 md:flex md:shrink-0 md:items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-3">
|
||||
<button
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="block md:hidden">
|
||||
<div class="space-y-1 px-2 pt-2 pb-3 sm:px-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-4 pb-3">
|
||||
<div class="flex items-center px-5 sm:px-6">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-white">Tom Cook</div>
|
||||
<div class="text-sm font-medium text-gray-400">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1 px-2 sm:px-3">
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Sign out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-disclosure>
|
||||
</nav>
|
||||
@ -0,0 +1,253 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<nav class="bg-gray-800">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
|
||||
<div class="relative flex h-16 items-center justify-between">
|
||||
<div class="flex items-center px-2 lg:px-0">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden lg:ml-6 lg:block">
|
||||
<div class="flex space-x-4">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end">
|
||||
<div class="grid w-full max-w-lg grid-cols-1 lg:max-w-xs">
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
class="col-start-1 row-start-1 block w-full rounded-md bg-gray-700 py-1.5 pr-3 pl-10 text-base text-white outline-hidden placeholder:text-gray-400 focus:bg-white focus:text-gray-900 focus:placeholder:text-gray-400 sm:text-sm/6"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:ml-4 lg:block">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="relative shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-4 shrink-0">
|
||||
<button
|
||||
class="relative flex rounded-full bg-gray-800 text-sm text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="block lg:hidden">
|
||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-4 pb-3">
|
||||
<div class="flex items-center px-5">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-white">Tom Cook</div>
|
||||
<div class="text-sm font-medium text-gray-400">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1 px-2">
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Sign out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-disclosure>
|
||||
</nav>
|
||||
@ -0,0 +1,227 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<nav class="bg-white shadow-sm">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 justify-between">
|
||||
<div class="flex">
|
||||
<div class="flex shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-3">
|
||||
<button
|
||||
class="relative flex rounded-full bg-white text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="-mr-2 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="block sm:hidden">
|
||||
<div class="space-y-1 pt-2 pb-3">
|
||||
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pr-4 pl-3 text-base font-medium text-indigo-700"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4 pb-3">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
Tom Cook
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
|
||||
>Sign out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-disclosure>
|
||||
</nav>
|
||||
@ -0,0 +1,229 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<nav class="bg-gray-800">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:block">
|
||||
<div class="flex space-x-4">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:block">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-3">
|
||||
<button
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mr-2 flex sm:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="block sm:hidden">
|
||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-4 pb-3">
|
||||
<div class="flex items-center px-5">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-white">Tom Cook</div>
|
||||
<div class="text-sm font-medium text-gray-400">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1 px-2">
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Sign out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-disclosure>
|
||||
</nav>
|
||||
@ -0,0 +1,177 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<nav class="bg-gray-800">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-16 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"
|
||||
>
|
||||
<div class="flex shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:block">
|
||||
<div class="flex space-x-4">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-3">
|
||||
<button
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="block sm:hidden">
|
||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</el-disclosure>
|
||||
</nav>
|
||||
@ -0,0 +1,173 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<nav class="bg-white shadow-sm">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-16 justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"
|
||||
>
|
||||
<div class="flex shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-3">
|
||||
<button
|
||||
class="relative flex rounded-full bg-white text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="block sm:hidden">
|
||||
<div class="space-y-1 pt-2 pb-4">
|
||||
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pr-4 pl-3 text-base font-medium text-indigo-700"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</el-disclosure>
|
||||
</nav>
|
||||
@ -0,0 +1,260 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<header class="bg-white shadow-sm">
|
||||
<div
|
||||
class="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8"
|
||||
>
|
||||
<div class="relative flex h-16 justify-between">
|
||||
<div class="relative z-10 flex px-2 lg:px-0">
|
||||
<div class="flex shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative z-0 flex flex-1 items-center justify-center px-2 sm:absolute sm:inset-0"
|
||||
>
|
||||
<div class="grid w-full grid-cols-1 sm:max-w-xs">
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Search"
|
||||
class="col-start-1 row-start-1 block w-full rounded-md bg-white py-1.5 pr-3 pl-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10 flex items-center lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="relative shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-4 shrink-0">
|
||||
<button
|
||||
class="relative flex rounded-full bg-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<nav aria-label="Global" class="hidden lg:flex lg:space-x-8 lg:py-2">
|
||||
<!-- Current: "bg-gray-100 text-gray-900", Default: "text-gray-900 hover:bg-gray-50 hover:text-gray-900" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-900"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Calendar</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="contents lg:hidden">
|
||||
<nav aria-label="Global">
|
||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
||||
<!-- Current: "bg-gray-100 text-gray-900", Default: "text-gray-900 hover:bg-gray-50 hover:text-gray-900" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="block rounded-md bg-gray-100 px-3 py-2 text-base font-medium text-gray-900"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4 pb-3">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
Tom Cook
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1 px-2">
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Sign out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</el-disclosure>
|
||||
</header>
|
||||
@ -0,0 +1,261 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<header class="bg-gray-800">
|
||||
<div
|
||||
class="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-700 lg:px-8"
|
||||
>
|
||||
<div class="relative flex h-16 justify-between">
|
||||
<div class="relative z-10 flex px-2 lg:px-0">
|
||||
<div class="flex shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative z-0 flex flex-1 items-center justify-center px-2 sm:absolute sm:inset-0"
|
||||
>
|
||||
<div class="grid w-full grid-cols-1 sm:max-w-xs">
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
class="col-start-1 row-start-1 block w-full rounded-md bg-gray-700 py-1.5 pr-3 pl-10 text-base text-white outline-hidden placeholder:text-gray-400 focus:bg-white focus:text-gray-900 focus:placeholder:text-gray-400 sm:text-sm/6"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10 flex items-center lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="relative shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-4 shrink-0">
|
||||
<button
|
||||
class="relative flex rounded-full bg-gray-800 text-sm text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<nav aria-label="Global" class="hidden lg:flex lg:space-x-8 lg:py-2">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="inline-flex items-center rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="contents lg:hidden">
|
||||
<nav aria-label="Global">
|
||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-4 pb-3">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-white">
|
||||
Tom Cook
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-400">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1 px-2">
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>Sign out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</el-disclosure>
|
||||
</header>
|
||||
@ -0,0 +1,248 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<nav class="bg-white shadow-sm">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 justify-between">
|
||||
<div class="flex">
|
||||
<div class="mr-2 -ml-2 flex items-center md:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden md:ml-6 md:flex md:space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex items-center gap-x-1.5 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"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="-ml-0.5 size-5"
|
||||
>
|
||||
<path
|
||||
d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
|
||||
/>
|
||||
</svg>
|
||||
New Job
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden md:ml-4 md:flex md:shrink-0 md:items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-3">
|
||||
<button
|
||||
class="relative flex rounded-full bg-white text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="block md:hidden">
|
||||
<div class="space-y-1 pt-2 pb-3">
|
||||
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pr-4 pl-3 text-base font-medium text-indigo-700 sm:pr-6 sm:pl-5"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 sm:pr-6 sm:pl-5"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 sm:pr-6 sm:pl-5"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 sm:pr-6 sm:pl-5"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4 pb-3">
|
||||
<div class="flex items-center px-4 sm:px-6">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
Tom Cook
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6"
|
||||
>Sign out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-disclosure>
|
||||
</nav>
|
||||
@ -0,0 +1,252 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<nav class="bg-white shadow-sm">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
|
||||
<div class="flex h-16 justify-between">
|
||||
<div class="flex px-2 lg:px-0">
|
||||
<div class="flex shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden lg:ml-6 lg:flex lg:space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center px-2 lg:ml-6 lg:justify-end"
|
||||
>
|
||||
<div class="grid w-full max-w-lg grid-cols-1 lg:max-w-xs">
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Search"
|
||||
class="col-start-1 row-start-1 block w-full rounded-md bg-white py-1.5 pr-3 pl-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="mobile-menu"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:ml-4 lg:flex lg:items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="relative shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-4 shrink-0">
|
||||
<button
|
||||
class="relative flex rounded-full bg-white text-sm focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-disclosure id="mobile-menu" hidden class="block lg:hidden">
|
||||
<div class="space-y-1 pt-2 pb-3">
|
||||
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pr-4 pl-3 text-base font-medium text-indigo-700"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
|
||||
>Team</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
|
||||
>Projects</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
|
||||
>Calendar</a
|
||||
>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4 pb-3">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
Tom Cook
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
|
||||
>Sign out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-disclosure>
|
||||
</nav>
|
||||
@ -0,0 +1,253 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<!-- When the mobile menu is open, add `overflow-hidden` to the `body` element to prevent double scrollbars -->
|
||||
<header class="bg-white shadow-xs lg:static lg:overflow-y-visible">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div
|
||||
class="relative flex justify-between lg:gap-8 xl:grid xl:grid-cols-12"
|
||||
>
|
||||
<div
|
||||
class="flex md:absolute md:inset-y-0 md:left-0 lg:static xl:col-span-2"
|
||||
>
|
||||
<div class="flex shrink-0 items-center">
|
||||
<a href="#">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 md:px-8 lg:px-0 xl:col-span-6">
|
||||
<div
|
||||
class="flex items-center px-6 py-4 md:mx-auto md:max-w-3xl lg:mx-0 lg:max-w-none xl:px-0"
|
||||
>
|
||||
<div class="grid w-full grid-cols-1">
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Search"
|
||||
class="col-start-1 row-start-1 block w-full rounded-md bg-white py-1.5 pr-3 pl-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center md:absolute md:inset-y-0 md:right-0 lg:hidden"
|
||||
>
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
popovertarget="mobile-menu-popover"
|
||||
class="relative -mx-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden focus:ring-inset"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open menu</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 not-in-aria-expanded:hidden"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:flex lg:items-center lg:justify-end xl:col-span-4"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-5 shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<el-dropdown class="relative ml-5 shrink-0">
|
||||
<button
|
||||
class="relative flex rounded-full bg-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:outline-hidden"
|
||||
>Sign out</a
|
||||
>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="ml-6 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"
|
||||
>New Project</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-popover
|
||||
id="mobile-menu-popover"
|
||||
anchor="bottom"
|
||||
popover
|
||||
aria-label="Global"
|
||||
class="w-full overflow-visible backdrop:bg-transparent open:block lg:hidden"
|
||||
>
|
||||
<div class="mx-auto max-w-3xl space-y-1 px-2 pt-2 pb-3 sm:px-4">
|
||||
<!-- Current: "bg-gray-100 text-gray-900", Default: "hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="block rounded-md bg-gray-100 px-3 py-2 text-base font-medium text-gray-900"
|
||||
>Dashboard</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium hover:bg-gray-50"
|
||||
>Calendar</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium hover:bg-gray-50"
|
||||
>Teams</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium hover:bg-gray-50"
|
||||
>Directory</a
|
||||
>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4 pb-3">
|
||||
<div class="mx-auto flex max-w-3xl items-center px-4 sm:px-6">
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
Chelsea Hagon
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
chelsea.hagon@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mx-auto mt-3 max-w-3xl space-y-1 px-2 sm:px-4">
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Settings</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
|
||||
>Sign out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</header>
|
||||
@ -0,0 +1,110 @@
|
||||
<div
|
||||
class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
|
||||
>
|
||||
<div class="flex flex-1 justify-between sm:hidden">
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>Previous</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>Next</a
|
||||
>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
Showing
|
||||
<span class="font-medium">1</span>
|
||||
to
|
||||
<span class="font-medium">10</span>
|
||||
of
|
||||
<span class="font-medium">97</span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<nav
|
||||
aria-label="Pagination"
|
||||
class="isolate inline-flex -space-x-px rounded-md shadow-xs"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<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>
|
||||
</a>
|
||||
<!-- Current: "z-10 bg-indigo-600 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>1</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
|
||||
>2</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex"
|
||||
>3</a
|
||||
>
|
||||
<span
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-gray-300 ring-inset focus:outline-offset-0"
|
||||
>...</span
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex"
|
||||
>8</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
|
||||
>9</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
|
||||
>10</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<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>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,84 @@
|
||||
<nav
|
||||
class="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0"
|
||||
>
|
||||
<div class="-mt-px flex w-0 flex-1">
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mr-3 size-5 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Previous
|
||||
</a>
|
||||
</div>
|
||||
<div class="hidden md:-mt-px md:flex">
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>1</a
|
||||
>
|
||||
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600"
|
||||
>2</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>3</a
|
||||
>
|
||||
<span
|
||||
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500"
|
||||
>...</span
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>8</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>9</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>10</a
|
||||
>
|
||||
</div>
|
||||
<div class="-mt-px flex w-0 flex-1 justify-end">
|
||||
<a
|
||||
href="#"
|
||||
class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>
|
||||
Next
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="ml-3 size-5 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,28 @@
|
||||
<nav
|
||||
aria-label="Pagination"
|
||||
class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
|
||||
>
|
||||
<div class="hidden sm:block">
|
||||
<p class="text-sm text-gray-700">
|
||||
Showing
|
||||
<span class="font-medium">1</span>
|
||||
to
|
||||
<span class="font-medium">10</span>
|
||||
of
|
||||
<span class="font-medium">20</span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-1 justify-between sm:justify-end">
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus-visible:outline-offset-0"
|
||||
>Previous</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus-visible:outline-offset-0"
|
||||
>Next</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,49 @@
|
||||
<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>
|
||||
@ -0,0 +1,93 @@
|
||||
<div class="px-4 py-12 sm:px-6 lg:px-8">
|
||||
<nav aria-label="Progress" class="flex justify-center">
|
||||
<ol role="list" class="space-y-6">
|
||||
<li>
|
||||
<!-- Complete Step -->
|
||||
<a href="#" class="group">
|
||||
<span class="flex items-start">
|
||||
<span
|
||||
class="relative flex size-5 shrink-0 items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-full text-indigo-600 group-hover:text-indigo-800"
|
||||
>
|
||||
<path
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900"
|
||||
>Create account</span
|
||||
>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<!-- Current Step -->
|
||||
<a href="#" aria-current="step" class="flex items-start">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="relative flex size-5 shrink-0 items-center justify-center"
|
||||
>
|
||||
<span
|
||||
class="absolute size-4 rounded-full bg-indigo-200"
|
||||
></span>
|
||||
<span
|
||||
class="relative block size-2 rounded-full bg-indigo-600"
|
||||
></span>
|
||||
</span>
|
||||
<span class="ml-3 text-sm font-medium text-indigo-600"
|
||||
>Profile information</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<!-- Upcoming Step -->
|
||||
<a href="#" class="group">
|
||||
<div class="flex items-start">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="relative flex size-5 shrink-0 items-center justify-center"
|
||||
>
|
||||
<div
|
||||
class="size-2 rounded-full bg-gray-300 group-hover:bg-gray-400"
|
||||
></div>
|
||||
</div>
|
||||
<p
|
||||
class="ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
Theme
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<!-- Upcoming Step -->
|
||||
<a href="#" class="group">
|
||||
<div class="flex items-start">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="relative flex size-5 shrink-0 items-center justify-center"
|
||||
>
|
||||
<div
|
||||
class="size-2 rounded-full bg-gray-300 group-hover:bg-gray-400"
|
||||
></div>
|
||||
</div>
|
||||
<p
|
||||
class="ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
Preview
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
@ -0,0 +1,103 @@
|
||||
<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>
|
||||
@ -0,0 +1,140 @@
|
||||
<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>
|
||||
@ -0,0 +1,107 @@
|
||||
<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>
|
||||
@ -0,0 +1,152 @@
|
||||
<div class="lg:border-t lg:border-b lg:border-gray-200">
|
||||
<nav aria-label="Progress" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<ol
|
||||
role="list"
|
||||
class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-r lg:border-l lg:border-gray-200"
|
||||
>
|
||||
<li class="relative overflow-hidden lg:flex-1">
|
||||
<div
|
||||
class="overflow-hidden rounded-t-md border border-b-0 border-gray-200 lg:border-0"
|
||||
>
|
||||
<!-- Completed Step -->
|
||||
<a href="#" class="group">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-gray-200 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full"
|
||||
></span>
|
||||
<span
|
||||
class="flex items-start px-6 py-5 text-sm font-medium"
|
||||
>
|
||||
<span class="shrink-0">
|
||||
<span
|
||||
class="flex size-10 items-center justify-center rounded-full bg-indigo-600"
|
||||
>
|
||||
<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>
|
||||
<span class="mt-0.5 ml-4 flex min-w-0 flex-col">
|
||||
<span class="text-sm font-medium"
|
||||
>Job Details</span
|
||||
>
|
||||
<span class="text-sm font-medium text-gray-500"
|
||||
>Vitae sed mi luctus laoreet.</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="relative overflow-hidden lg:flex-1">
|
||||
<div class="overflow-hidden border border-gray-200 lg:border-0">
|
||||
<!-- Current Step -->
|
||||
<a href="#" aria-current="step">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="absolute top-0 left-0 h-full w-1 bg-indigo-600 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full"
|
||||
></span>
|
||||
<span
|
||||
class="flex items-start px-6 py-5 text-sm font-medium lg:pl-9"
|
||||
>
|
||||
<span class="shrink-0">
|
||||
<span
|
||||
class="flex size-10 items-center justify-center rounded-full border-2 border-indigo-600"
|
||||
>
|
||||
<span class="text-indigo-600">02</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="mt-0.5 ml-4 flex min-w-0 flex-col">
|
||||
<span
|
||||
class="text-sm font-medium text-indigo-600"
|
||||
>Application form</span
|
||||
>
|
||||
<span class="text-sm font-medium text-gray-500"
|
||||
>Cursus semper viverra.</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<!-- Separator -->
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="absolute inset-0 top-0 left-0 hidden w-3 lg:block"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 12 82"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
class="size-full text-gray-300"
|
||||
>
|
||||
<path
|
||||
d="M0.5 0V31L10.5 41L0.5 51V82"
|
||||
stroke="currentcolor"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="relative overflow-hidden lg:flex-1">
|
||||
<div
|
||||
class="overflow-hidden rounded-b-md border border-t-0 border-gray-200 lg:border-0"
|
||||
>
|
||||
<!-- Upcoming Step -->
|
||||
<a href="#" class="group">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-gray-200 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full"
|
||||
></span>
|
||||
<span
|
||||
class="flex items-start px-6 py-5 text-sm font-medium lg:pl-9"
|
||||
>
|
||||
<span class="shrink-0">
|
||||
<span
|
||||
class="flex size-10 items-center justify-center rounded-full border-2 border-gray-300"
|
||||
>
|
||||
<span class="text-gray-500">03</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="mt-0.5 ml-4 flex min-w-0 flex-col">
|
||||
<span class="text-sm font-medium text-gray-500"
|
||||
>Preview</span
|
||||
>
|
||||
<span class="text-sm font-medium text-gray-500"
|
||||
>Penatibus eu quis ante.</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<!-- Separator -->
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="absolute inset-0 top-0 left-0 hidden w-3 lg:block"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 12 82"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
class="size-full text-gray-300"
|
||||
>
|
||||
<path
|
||||
d="M0.5 0V31L10.5 41L0.5 51V82"
|
||||
stroke="currentcolor"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
@ -0,0 +1,20 @@
|
||||
<div>
|
||||
<h4 class="sr-only">Status</h4>
|
||||
<p class="text-sm font-medium text-gray-900">Migrating MySQL database...</p>
|
||||
<div aria-hidden="true" class="mt-6">
|
||||
<div class="overflow-hidden rounded-full bg-gray-200">
|
||||
<div
|
||||
style="width: 37.5%"
|
||||
class="h-2 rounded-full bg-indigo-600"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-6 hidden grid-cols-4 text-sm font-medium text-gray-600 sm:grid"
|
||||
>
|
||||
<div class="text-indigo-600">Copying files</div>
|
||||
<div class="text-center text-indigo-600">Migrating database</div>
|
||||
<div class="text-center">Compiling assets</div>
|
||||
<div class="text-right">Deployed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,41 @@
|
||||
<nav aria-label="Progress">
|
||||
<ol role="list" class="space-y-4 md:flex md:space-y-0 md:space-x-8">
|
||||
<li class="md:flex-1">
|
||||
<!-- Completed Step -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex flex-col border-l-4 border-indigo-600 py-2 pl-4 hover:border-indigo-800 md:border-t-4 md:border-l-0 md:pt-4 md:pb-0 md:pl-0"
|
||||
>
|
||||
<span
|
||||
class="text-sm font-medium text-indigo-600 group-hover:text-indigo-800"
|
||||
>Step 1</span
|
||||
>
|
||||
<span class="text-sm font-medium">Job details</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="md:flex-1">
|
||||
<!-- Current Step -->
|
||||
<a
|
||||
href="#"
|
||||
aria-current="step"
|
||||
class="flex flex-col border-l-4 border-indigo-600 py-2 pl-4 md:border-t-4 md:border-l-0 md:pt-4 md:pb-0 md:pl-0"
|
||||
>
|
||||
<span class="text-sm font-medium text-indigo-600">Step 2</span>
|
||||
<span class="text-sm font-medium">Application form</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="md:flex-1">
|
||||
<!-- Upcoming Step -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex flex-col border-l-4 border-gray-200 py-2 pl-4 hover:border-gray-300 md:border-t-4 md:border-l-0 md:pt-4 md:pb-0 md:pl-0"
|
||||
>
|
||||
<span
|
||||
class="text-sm font-medium text-gray-500 group-hover:text-gray-700"
|
||||
>Step 3</span
|
||||
>
|
||||
<span class="text-sm font-medium">Preview</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
@ -0,0 +1,234 @@
|
||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6">
|
||||
<div class="flex h-16 shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=white"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-indigo-700 text-white", Default: "text-indigo-200 hover:text-white hover:bg-indigo-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-indigo-700 p-2 text-sm/6 font-semibold text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-white"
|
||||
>
|
||||
<path
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Dashboard
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-indigo-500 ring-inset"
|
||||
>5</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
|
||||
>
|
||||
<path
|
||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Projects
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-indigo-500 ring-inset"
|
||||
>12</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
|
||||
>
|
||||
<path
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Calendar
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-indigo-500 ring-inset"
|
||||
>20+</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
|
||||
>
|
||||
<path
|
||||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-200 group-hover:text-white"
|
||||
>
|
||||
<path
|
||||
d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-xs/6 font-semibold text-indigo-200">
|
||||
Your teams
|
||||
</div>
|
||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-indigo-700 text-white", Default: "text-indigo-200 hover:text-white hover:bg-indigo-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"
|
||||
>H</span
|
||||
>
|
||||
<span class="truncate">Heroicons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"
|
||||
>T</span
|
||||
>
|
||||
<span class="truncate">Tailwind Labs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"
|
||||
>W</span
|
||||
>
|
||||
<span class="truncate">Workcation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="-mx-6 mt-auto">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-white hover:bg-indigo-700"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full bg-indigo-700"
|
||||
/>
|
||||
<span class="sr-only">Your profile</span>
|
||||
<span aria-hidden="true">Tom Cook</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -0,0 +1,234 @@
|
||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6">
|
||||
<div class="flex h-16 shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-gray-800 p-2 text-sm/6 font-semibold text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Dashboard
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-gray-900 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-gray-700 ring-inset"
|
||||
>5</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Projects
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-gray-900 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-gray-700 ring-inset"
|
||||
>12</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Calendar
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-gray-900 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-white ring-1 ring-gray-700 ring-inset"
|
||||
>20+</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-xs/6 font-semibold text-gray-400">
|
||||
Your teams
|
||||
</div>
|
||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white"
|
||||
>H</span
|
||||
>
|
||||
<span class="truncate">Heroicons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white"
|
||||
>T</span
|
||||
>
|
||||
<span class="truncate">Tailwind Labs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-400 hover:bg-gray-800 hover:text-white"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white"
|
||||
>W</span
|
||||
>
|
||||
<span class="truncate">Workcation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="-mx-6 mt-auto">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-white hover:bg-gray-800"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full bg-gray-800"
|
||||
/>
|
||||
<span class="sr-only">Your profile</span>
|
||||
<span aria-hidden="true">Tom Cook</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -0,0 +1,236 @@
|
||||
<div
|
||||
class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6"
|
||||
>
|
||||
<div class="flex h-16 shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Dashboard
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>5</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Projects
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>12</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Calendar
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>20+</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-xs/6 font-semibold text-gray-400">
|
||||
Your teams
|
||||
</div>
|
||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>H</span
|
||||
>
|
||||
<span class="truncate">Heroicons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>T</span
|
||||
>
|
||||
<span class="truncate">Tailwind Labs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>W</span
|
||||
>
|
||||
<span class="truncate">Workcation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="-mx-6 mt-auto">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full bg-gray-50"
|
||||
/>
|
||||
<span class="sr-only">Your profile</span>
|
||||
<span aria-hidden="true">Tom Cook</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -0,0 +1,167 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<div
|
||||
class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6"
|
||||
>
|
||||
<div class="flex h-16 shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50", Default: "hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md bg-gray-50 py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700"
|
||||
>Dashboard</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="sub-menu-1"
|
||||
class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
|
||||
>
|
||||
<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>
|
||||
Teams
|
||||
</button>
|
||||
<el-disclosure id="sub-menu-1" hidden class="contents">
|
||||
<ul class="mt-1 px-2">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>Engineering</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>Human Resources</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>Customer Success</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</el-disclosure>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="sub-menu-2"
|
||||
class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
|
||||
>
|
||||
<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>
|
||||
Projects
|
||||
</button>
|
||||
<el-disclosure id="sub-menu-2" hidden class="contents">
|
||||
<ul class="mt-1 px-2">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>GraphQL API</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>iOS App</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>Android App</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>New Customer Portal</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</el-disclosure>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>Calendar</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>Documents</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>Reports</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="-mx-6 mt-auto">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full bg-gray-50"
|
||||
/>
|
||||
<span class="sr-only">Your profile</span>
|
||||
<span aria-hidden="true">Tom Cook</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -0,0 +1,273 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<div
|
||||
class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6"
|
||||
>
|
||||
<div class="flex h-16 shrink-0 items-center">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50", Default: "hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-gray-700"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="sub-menu-1"
|
||||
class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Teams
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="ml-auto size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
<el-disclosure id="sub-menu-1" hidden class="contents">
|
||||
<ul class="mt-1 px-2">
|
||||
<li>
|
||||
<!-- 44px -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>Engineering</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<!-- 44px -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>Human Resources</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<!-- 44px -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>Customer Success</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</el-disclosure>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
command="--toggle"
|
||||
commandfor="sub-menu-2"
|
||||
class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Projects
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="ml-auto size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
<el-disclosure id="sub-menu-2" hidden class="contents">
|
||||
<ul class="mt-1 px-2">
|
||||
<li>
|
||||
<!-- 44px -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>GraphQL API</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<!-- 44px -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>iOS App</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<!-- 44px -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>Android App</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<!-- 44px -->
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
|
||||
>New Customer Portal</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</el-disclosure>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Calendar
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="-mx-6 mt-auto">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full bg-gray-50"
|
||||
/>
|
||||
<span class="sr-only">Your profile</span>
|
||||
<span aria-hidden="true">Tom Cook</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -0,0 +1,76 @@
|
||||
<div>
|
||||
<div class="grid grid-cols-1 sm:hidden">
|
||||
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
|
||||
<select
|
||||
aria-label="Select a tab"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
|
||||
>
|
||||
<option>My Account</option>
|
||||
<option>Company</option>
|
||||
<option selected>Team Members</option>
|
||||
<option>Billing</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<nav
|
||||
aria-label="Tabs"
|
||||
class="isolate flex divide-x divide-gray-200 rounded-lg shadow-sm"
|
||||
>
|
||||
<!-- Current: "text-gray-900", Default: "text-gray-500 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group relative min-w-0 flex-1 overflow-hidden rounded-l-lg bg-white px-4 py-4 text-center text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:z-10"
|
||||
>
|
||||
<span>My Account</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="absolute inset-x-0 bottom-0 h-0.5 bg-transparent"
|
||||
></span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group relative min-w-0 flex-1 overflow-hidden bg-white px-4 py-4 text-center text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:z-10"
|
||||
>
|
||||
<span>Company</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="absolute inset-x-0 bottom-0 h-0.5 bg-transparent"
|
||||
></span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="group relative min-w-0 flex-1 overflow-hidden bg-white px-4 py-4 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10"
|
||||
>
|
||||
<span>Team Members</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="absolute inset-x-0 bottom-0 h-0.5 bg-indigo-500"
|
||||
></span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group relative min-w-0 flex-1 overflow-hidden rounded-r-lg bg-white px-4 py-4 text-center text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:z-10"
|
||||
>
|
||||
<span>Billing</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="absolute inset-x-0 bottom-0 h-0.5 bg-transparent"
|
||||
></span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,55 @@
|
||||
<div>
|
||||
<div class="grid grid-cols-1 sm:hidden">
|
||||
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
|
||||
<select
|
||||
aria-label="Select a tab"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
|
||||
>
|
||||
<option>My Account</option>
|
||||
<option>Company</option>
|
||||
<option selected>Team Members</option>
|
||||
<option>Billing</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<div class="border-b border-gray-200">
|
||||
<nav aria-label="Tabs" class="-mb-px flex">
|
||||
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="w-1/4 border-b-2 border-transparent px-1 py-4 text-center text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>My Account</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="w-1/4 border-b-2 border-transparent px-1 py-4 text-center text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Company</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="w-1/4 border-b-2 border-indigo-500 px-1 py-4 text-center text-sm font-medium text-indigo-600"
|
||||
>Team Members</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="w-1/4 border-b-2 border-transparent px-1 py-4 text-center text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Billing</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,50 @@
|
||||
<div class="bg-gray-900 px-4 py-6 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="grid grid-cols-1 sm:hidden">
|
||||
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
|
||||
<select
|
||||
aria-label="Select a tab"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 py-2 pr-8 pl-3 text-base text-white outline-1 -outline-offset-1 outline-white/10 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500"
|
||||
>
|
||||
<option>My Account</option>
|
||||
<option>Company</option>
|
||||
<option selected>Team Members</option>
|
||||
<option>Billing</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<nav class="flex border-b border-white/10 py-4">
|
||||
<ul
|
||||
role="list"
|
||||
class="flex min-w-full flex-none gap-x-8 px-2 text-sm/6 font-semibold text-gray-400"
|
||||
>
|
||||
<li>
|
||||
<a href="#" class="">My Account</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="">Company</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-indigo-400">Team Members</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="">Billing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div>
|
||||
<div class="grid grid-cols-1 sm:hidden">
|
||||
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
|
||||
<select
|
||||
aria-label="Select a tab"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
|
||||
>
|
||||
<option>My Account</option>
|
||||
<option>Company</option>
|
||||
<option selected>Team Members</option>
|
||||
<option>Billing</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<nav aria-label="Tabs" class="flex space-x-4">
|
||||
<!-- Current: "bg-gray-100 text-gray-700", Default: "text-gray-500 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>My Account</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Company</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700"
|
||||
>Team Members</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Billing</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div>
|
||||
<div class="grid grid-cols-1 sm:hidden">
|
||||
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
|
||||
<select
|
||||
aria-label="Select a tab"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
|
||||
>
|
||||
<option>My Account</option>
|
||||
<option>Company</option>
|
||||
<option selected>Team Members</option>
|
||||
<option>Billing</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<nav aria-label="Tabs" class="flex space-x-4">
|
||||
<!-- Current: "bg-gray-200 text-gray-800", Default: "text-gray-600 hover:text-gray-800" -->
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-800"
|
||||
>My Account</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-800"
|
||||
>Company</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-800"
|
||||
>Team Members</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-800"
|
||||
>Billing</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div>
|
||||
<div class="grid grid-cols-1 sm:hidden">
|
||||
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
|
||||
<select
|
||||
aria-label="Select a tab"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
|
||||
>
|
||||
<option>My Account</option>
|
||||
<option>Company</option>
|
||||
<option selected>Team Members</option>
|
||||
<option>Billing</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<nav aria-label="Tabs" class="flex space-x-4">
|
||||
<!-- Current: "bg-indigo-100 text-indigo-700", Default: "text-gray-500 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>My Account</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Company</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="rounded-md bg-indigo-100 px-3 py-2 text-sm font-medium text-indigo-700"
|
||||
>Team Members</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
>Billing</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,55 @@
|
||||
<div>
|
||||
<div class="grid grid-cols-1 sm:hidden">
|
||||
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
|
||||
<select
|
||||
aria-label="Select a tab"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
|
||||
>
|
||||
<option>My Account</option>
|
||||
<option>Company</option>
|
||||
<option selected>Team Members</option>
|
||||
<option>Billing</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<div class="border-b border-gray-200">
|
||||
<nav aria-label="Tabs" class="-mb-px flex space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>My Account</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Company</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="border-b-2 border-indigo-500 px-1 py-4 text-sm font-medium whitespace-nowrap text-indigo-600"
|
||||
>Team Members</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>Billing</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,79 @@
|
||||
<div>
|
||||
<div class="grid grid-cols-1 sm:hidden">
|
||||
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
|
||||
<select
|
||||
aria-label="Select a tab"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
|
||||
>
|
||||
<option>Applied</option>
|
||||
<option>Phone Screening</option>
|
||||
<option selected>Interview</option>
|
||||
<option>Offer</option>
|
||||
<option>Disqualified</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<div class="border-b border-gray-200">
|
||||
<nav aria-label="Tabs" class="-mb-px flex space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-200 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="flex border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-200 hover:text-gray-700"
|
||||
>
|
||||
Applied
|
||||
<!-- Current: "bg-indigo-100 text-indigo-600", Default: "bg-gray-100 text-gray-900" -->
|
||||
<span
|
||||
class="ml-3 hidden rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-900 md:inline-block"
|
||||
>52</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-200 hover:text-gray-700"
|
||||
>
|
||||
Phone Screening
|
||||
<span
|
||||
class="ml-3 hidden rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-900 md:inline-block"
|
||||
>6</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="flex border-b-2 border-indigo-500 px-1 py-4 text-sm font-medium whitespace-nowrap text-indigo-600"
|
||||
>
|
||||
Interview
|
||||
<span
|
||||
class="ml-3 hidden rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-600 md:inline-block"
|
||||
>4</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-200 hover:text-gray-700"
|
||||
>
|
||||
Offer
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex border-b-2 border-transparent px-1 py-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-200 hover:text-gray-700"
|
||||
>
|
||||
Disqualified
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,108 @@
|
||||
<div>
|
||||
<div class="grid grid-cols-1 sm:hidden">
|
||||
<!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
|
||||
<select
|
||||
aria-label="Select a tab"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
|
||||
>
|
||||
<option>My Account</option>
|
||||
<option>Company</option>
|
||||
<option selected>Team Members</option>
|
||||
<option>Billing</option>
|
||||
</select>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<div class="border-b border-gray-200">
|
||||
<nav aria-label="Tabs" class="-mb-px flex space-x-8">
|
||||
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group inline-flex items-center border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>
|
||||
<!-- Current: "text-indigo-500", Default: "text-gray-400 group-hover:text-gray-500" -->
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mr-2 -ml-0.5 size-5 text-gray-400 group-hover:text-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>My Account</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group inline-flex items-center border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mr-2 -ml-0.5 size-5 text-gray-400 group-hover:text-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M4 16.5v-13h-.25a.75.75 0 0 1 0-1.5h12.5a.75.75 0 0 1 0 1.5H16v13h.25a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75v-2.5a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1 0-1.5H4Zm3-11a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM11 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm.5 3.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Company</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="group inline-flex items-center border-b-2 border-indigo-500 px-1 py-4 text-sm font-medium text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mr-2 -ml-0.5 size-5 text-indigo-500"
|
||||
>
|
||||
<path
|
||||
d="M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 0 0-1.588-3.755 4.502 4.502 0 0 1 5.874 2.636.818.818 0 0 1-.36.98A7.465 7.465 0 0 1 14.5 16Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Team Members</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="group inline-flex items-center border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="mr-2 -ml-0.5 size-5 text-gray-400 group-hover:text-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M2.5 4A1.5 1.5 0 0 0 1 5.5V6h18v-.5A1.5 1.5 0 0 0 17.5 4h-15ZM19 8.5H1v6A1.5 1.5 0 0 0 2.5 16h15a1.5 1.5 0 0 0 1.5-1.5v-6ZM3 13.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Zm4.75-.75a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Billing</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,221 @@
|
||||
<nav aria-label="Sidebar" class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-100 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-100" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-gray-100 p-2 text-sm/6 font-semibold text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Dashboard
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>5</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Projects
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>12</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Calendar
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>20+</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-xs/6 font-semibold text-gray-400">Projects</div>
|
||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-100" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>W</span
|
||||
>
|
||||
<span class="truncate">Website redesign</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>G</span
|
||||
>
|
||||
<span class="truncate">GraphQL API</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>C</span
|
||||
>
|
||||
<span class="truncate">Customer migration guides</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-100 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>P</span
|
||||
>
|
||||
<span class="truncate">Profit sharing program</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -0,0 +1,47 @@
|
||||
<nav aria-label="Sidebar" class="flex flex-1 flex-col">
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-gray-50 p-2 pl-3 text-sm/6 font-semibold text-indigo-600"
|
||||
>Dashboard</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>Team</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>Projects</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>Calendar</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>Documents</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>Reports</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -0,0 +1,68 @@
|
||||
<nav aria-label="Sidebar" class="flex flex-1 flex-col">
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-gray-50 p-2 pl-3 text-sm/6 font-semibold text-indigo-600"
|
||||
>
|
||||
Dashboard
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>5</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
Projects
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>12</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
Calendar
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>20+</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -0,0 +1,148 @@
|
||||
<nav aria-label="Sidebar" class="flex flex-1 flex-col">
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Projects
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Calendar
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -0,0 +1,163 @@
|
||||
<nav aria-label="Sidebar" class="flex flex-1 flex-col">
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Dashboard
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>5</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Projects
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>12</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Calendar
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>20+</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -0,0 +1,221 @@
|
||||
<nav aria-label="Sidebar" class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Dashboard
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>5</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Projects
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>12</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Calendar
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ml-auto w-9 min-w-max rounded-full bg-white px-2.5 py-0.5 text-center text-xs/5 font-medium whitespace-nowrap text-gray-600 ring-1 ring-gray-200 ring-inset"
|
||||
>20+</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
|
||||
>
|
||||
<path
|
||||
d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-xs/6 font-semibold text-gray-400">Projects</div>
|
||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>W</span
|
||||
>
|
||||
<span class="truncate">Website redesign</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>G</span
|
||||
>
|
||||
<span class="truncate">GraphQL API</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>C</span
|
||||
>
|
||||
<span class="truncate">Customer migration guides</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
|
||||
>
|
||||
<span
|
||||
class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600"
|
||||
>P</span
|
||||
>
|
||||
<span class="truncate">Profit sharing program</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
Loading…
Reference in New Issue