<section class="bg-base-50 overflow-hidden">
<div class="px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<div
class="max-w-xl p-3 mx-auto overflow-hidden transition-all transform bg-white shadow-lg rounded-xl"
>
<!-- Input section with label and accessible search -->
<div class="relative bg-base-50 focus-within:bg-white rounded-md">
<label for="search" class="sr-only">Search</label>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-search size-5 pointer-events-none absolute top-3.5 left-4 text-base-400"
slot="icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
<path d="M21 21l-6 -6"></path>
</svg>
<input
id="search"
type="text"
class="w-full h-12 pr-4 bg-transparent border-0 text-base-800 placeholder-base-400 pl-11 focus:ring-0 sm:text-sm"
placeholder="Search for anything"
role="combobox"
aria-expanded="false"
aria-controls="options"
aria-autocomplete="list"
/>
</div>
<!-- Options list with roles and keyboard focusability -->
<ul
class="pt-3 space-y-3 overflow-y-auto max-h-96 scroll-py-3"
id="options"
role="listbox"
tabindex="0"
>
<li id="option-1" role="option" tabindex="0" aria-selected="false">
<button
class="flex p-2 items-center w-full text-xs text-base-500 duration-200 cursor-pointer select-none hover:text-accent-500 group rounded-md hover:bg-base-50"
>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-layout-2 size-4"
slot="icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
<path
d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
<path
d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
<path
d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
></path>
</svg>
<span class="flex-auto truncate">Search projects...</span>
</div>
<span class="flex-none ml-auto text-xs font-semibold text-base-400">
<kbd
class="flex items-center justify-center size-4 font-semibold text-base-500 border rounded bg-white border-base-200"
>
S
</kbd>
</span>
</button>
</li>
<li id="option-2" role="option" tabindex="0" aria-selected="false">
<button
class="flex p-2 items-center w-full text-xs text-base-500 duration-200 cursor-pointer select-none hover:text-accent-500 group rounded-md hover:bg-base-50"
>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-plus size-4"
slot="icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5l0 14"></path>
<path d="M5 12l14 0"></path>
</svg>
<span class="flex-auto truncate">Create another project</span>
</div>
<span class="flex-none ml-auto text-xs font-semibold text-base-400">
<kbd
class="flex items-center justify-center size-4 font-semibold text-base-500 border rounded bg-white border-base-200"
>
C
</kbd>
</span>
</button>
</li>
<!-- Add more items similarly with roles and attributes... -->
</ul>
</div>
</div>
</section>
