learning
/
tailwind-ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
drew/test-it
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0b1e6f33cf'
${ noResults }
tailwind-ai/components/application_ui/navigation/command_palettes/with_preview.html

2333 lines
112 KiB
HTML
Raw Blame History

<!-- 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-3xl 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 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>
<div class="flex transform-gpu divide-x divide-gray-100">
<div
class="max-h-96 min-w-0 flex-auto scroll-py-4 overflow-y-auto px-6 py-4"
>
<el-command-list class="-mx-2 block text-sm text-gray-700">
<el-defaults>
<h2
class="mx-2 mt-2 mb-4 text-xs font-semibold text-gray-500"
>
Recent searches
</h2>
<div class="text-sm text-gray-700">
<a
id="person-suggestion-6"
href="#"
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-suggestion-5"
href="#"
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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
>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-suggestion-3"
href="#"
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-suggestion-11"
href="#"
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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
>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-suggestion-17"
href="#"
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
</div>
</el-defaults>
<el-command-group hidden class="sm:h-96">
<a
id="person-1"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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
>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-2"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-3"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-4"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-5"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-6"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-7"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-8"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-9"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-10"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-11"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-12"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-13"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-14"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-15"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-16"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-17"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-18"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-19"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-20"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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
>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-21"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-22"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-23"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-24"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-25"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
<a
id="person-26"
href="#"
hidden
class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900"
>
<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>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block"
>
<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>
</el-command-group>
</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="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 font-semibold text-gray-900">No people 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>
<el-command-preview
for="person-suggestion-6"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Tom Cook</h2>
<p class="text-sm/6 text-gray-500">
Director, Product Development
</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>881-460-8515</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:tomcook@example.com"
class="text-indigo-600 underline"
>tomcook@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-suggestion-5"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Courtney Henry</h2>
<p class="text-sm/6 text-gray-500">Designer</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>640-309-4790</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:courtneyhenry@example.com"
class="text-indigo-600 underline"
>courtneyhenry@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-suggestion-3"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Dries Vincent</h2>
<p class="text-sm/6 text-gray-500">
Manager, Business Relations
</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>713-330-1164</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:driesvincent@example.com"
class="text-indigo-600 underline"
>driesvincent@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-suggestion-11"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Kristin Watson</h2>
<p class="text-sm/6 text-gray-500">VP, Human Resources</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>628.594.9386</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:kristinwatson@example.com"
class="text-indigo-600 underline"
>kristinwatson@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-suggestion-17"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Jeffrey Webb</h2>
<p class="text-sm/6 text-gray-500">Senior Art Director</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>735-907-6338</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:jeffreywebb@example.com"
class="text-indigo-600 underline"
>jeffreywebb@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-1"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">
Leslie Alexander
</h2>
<p class="text-sm/6 text-gray-500">Co-Founder / CEO</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>1-493-747-9031</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:lesliealexander@example.com"
class="text-indigo-600 underline"
>lesliealexander@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-2"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Michael Foster</h2>
<p class="text-sm/6 text-gray-500">Co-Founder / CTO</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>(520) 717-3793</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:michaelfoster@example.com"
class="text-indigo-600 underline"
>michaelfoster@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-3"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Dries Vincent</h2>
<p class="text-sm/6 text-gray-500">
Manager, Business Relations
</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>713-330-1164</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:driesvincent@example.com"
class="text-indigo-600 underline"
>driesvincent@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-4"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Lindsay Walton</h2>
<p class="text-sm/6 text-gray-500">Front-end Developer</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>929-472-9421</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:lindsaywalton@example.com"
class="text-indigo-600 underline"
>lindsaywalton@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-5"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Courtney Henry</h2>
<p class="text-sm/6 text-gray-500">Designer</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>640-309-4790</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:courtneyhenry@example.com"
class="text-indigo-600 underline"
>courtneyhenry@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-6"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Tom Cook</h2>
<p class="text-sm/6 text-gray-500">
Director, Product Development
</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>881-460-8515</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:tomcook@example.com"
class="text-indigo-600 underline"
>tomcook@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-7"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">
Whitney Francis
</h2>
<p class="text-sm/6 text-gray-500">Copywriter</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>885.518.1274</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:whitneyfrancis@example.com"
class="text-indigo-600 underline"
>whitneyfrancis@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-8"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">
Leonard Krasner
</h2>
<p class="text-sm/6 text-gray-500">Senior Designer</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>(515) 552-4223</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:leonardkrasner@example.com"
class="text-indigo-600 underline"
>leonardkrasner@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-9"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Floyd Miles</h2>
<p class="text-sm/6 text-gray-500">Principal Designer</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>345-500-5753</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:floydmiles@example.com"
class="text-indigo-600 underline"
>floydmiles@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-10"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Emily Selman</h2>
<p class="text-sm/6 text-gray-500">VP, User Experience</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>902-649-9025</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:emilyselman@example.com"
class="text-indigo-600 underline"
>emilyselman@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-11"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Kristin Watson</h2>
<p class="text-sm/6 text-gray-500">VP, Human Resources</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>628.594.9386</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:kristinwatson@example.com"
class="text-indigo-600 underline"
>kristinwatson@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-12"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Emma Dorsey</h2>
<p class="text-sm/6 text-gray-500">
Senior Front-end Developer
</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>(861) 305-6606</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:emmadorsey@example.com"
class="text-indigo-600 underline"
>emmadorsey@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-13"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Alicia Bell</h2>
<p class="text-sm/6 text-gray-500">Junior Copywriter</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>(401) 357-1796</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:aliciabell@example.com"
class="text-indigo-600 underline"
>aliciabell@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-14"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Jenny Wilson</h2>
<p class="text-sm/6 text-gray-500">Studio Artist</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>(974) 557-5873</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:jennywilson@example.com"
class="text-indigo-600 underline"
>jennywilson@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-15"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Anna Roberts</h2>
<p class="text-sm/6 text-gray-500">Partner, Creative</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>(424) 411-6610</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:annaroberts@example.com"
class="text-indigo-600 underline"
>annaroberts@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-16"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">
Benjamin Russel
</h2>
<p class="text-sm/6 text-gray-500">
Director, Print Operations
</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>645-664-8590</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:benjaminrussel@example.com"
class="text-indigo-600 underline"
>benjaminrussel@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-17"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Jeffrey Webb</h2>
<p class="text-sm/6 text-gray-500">Senior Art Director</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>735-907-6338</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:jeffreywebb@example.com"
class="text-indigo-600 underline"
>jeffreywebb@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-18"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Kathryn Murphy</h2>
<p class="text-sm/6 text-gray-500">
Associate Creative Director
</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>801.262.8098</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:kathrynmurphy@example.com"
class="text-indigo-600 underline"
>kathrynmurphy@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-19"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">
Lawrence Hunter
</h2>
<p class="text-sm/6 text-gray-500">Content Specialist</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>582-792-1717</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:lawrencehunter@example.com"
class="text-indigo-600 underline"
>lawrencehunter@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-20"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">
Yvette Armstrong
</h2>
<p class="text-sm/6 text-gray-500">Studio Artist</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>952.256.5380</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:yvettearmstrong@example.com"
class="text-indigo-600 underline"
>yvettearmstrong@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-21"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Angela Fisher</h2>
<p class="text-sm/6 text-gray-500">Chief Strategy Officer</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>295.646.2328</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:angelafisher@example.com"
class="text-indigo-600 underline"
>angelafisher@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-22"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Blake Reid</h2>
<p class="text-sm/6 text-gray-500">Account Coordinator</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>(963) 209-3673</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:blakereid@example.com"
class="text-indigo-600 underline"
>blakereid@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-23"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Hector Gibbons</h2>
<p class="text-sm/6 text-gray-500">VP, Marketing</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>(441) 383-1416</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:hectorgibbons@example.com"
class="text-indigo-600 underline"
>hectorgibbons@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-24"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">
Fabricio Mendes
</h2>
<p class="text-sm/6 text-gray-500">Senior Art Director</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>(412) 542-8899</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:fabriciomendes@example.com"
class="text-indigo-600 underline"
>fabriciomendes@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-25"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">
Jillian Steward
</h2>
<p class="text-sm/6 text-gray-500">Designer</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>908-440-7071</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:jilliansteward@example.com"
class="text-indigo-600 underline"
>jilliansteward@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
<el-command-preview
for="person-26"
hidden
class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex"
>
<div class="flex-none p-6 text-center">
<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="mx-auto size-16 rounded-full"
/>
<h2 class="mt-3 font-semibold text-gray-900">Chelsea Hagon</h2>
<p class="text-sm/6 text-gray-500">Human Resources Manager</p>
</div>
<div class="flex flex-auto flex-col justify-between p-6">
<dl
class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700"
>
<dt class="col-end-1 font-semibold text-gray-900">Phone</dt>
<dd>343-829-4718</dd>
<dt class="col-end-1 font-semibold text-gray-900">URL</dt>
<dd class="truncate">
<a
href="https://example.com"
class="text-indigo-600 underline"
>https://example.com</a
>
</dd>
<dt class="col-end-1 font-semibold text-gray-900">Email</dt>
<dd class="truncate">
<a
href="mailto:chelseahagon@example.com"
class="text-indigo-600 underline"
>chelseahagon@example.com</a
>
</dd>
</dl>
<button
type="button"
class="mt-6 w-full 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"
>
Send message
</button>
</div>
</el-command-preview>
</div>
</el-command-palette>
</el-dialog-panel>
</div>
</dialog>
</el-dialog>
Reference in New Issue View Git Blame Copy Permalink