commandbar

<section class="bg-gray-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-gray-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-search pointer-events-none absolute top-3.5 left-4 size-5 text-gray-400"
          aria-hidden="true"
        >
          <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-gray-800 placeholder-gray-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
          class="flex p-2 items-center text-xs text-gray-500 duration-200 cursor-pointer select-none hover:text-blue-500 group rounded-md hover:bg-gray-50"
          id="option-1"
          role="option"
          tabindex="0"
          aria-selected="false"
        >
          <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-components size-4"
              aria-hidden="true"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M3 12l3 3l3 -3l-3 -3z"></path>
              <path d="M15 12l3 3l3 -3l-3 -3z"></path>
              <path d="M9 6l3 3l3 -3l-3 -3z"></path>
              <path d="M9 18l3 3l3 -3l-3 -3z"></path>
            </svg>
            <span class="flex-auto truncate">Search projects...</span>
          </div>
          <span class="flex-none ml-auto text-xs font-semibold text-gray-400">
            <kbd
              class="flex items-center justify-center size-4 font-semibold text-gray-500 border rounded bg-white border-gray-200"
            >
              S
            </kbd>
          </span>
        </li>
        <li
          class="flex p-2 items-center text-xs text-gray-500 duration-200 cursor-pointer select-none hover:text-blue-500 group rounded-md hover:bg-gray-50"
          id="option-2"
          role="option"
          tabindex="0"
          aria-selected="false"
        >
          <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-square-plus size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M9 12h6"></path>
              <path d="M12 9v6"></path>
              <path
                d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z"
              ></path>
            </svg>
            <p>Create another project</p>
          </div>
          <span class="flex-none ml-auto text-xs font-semibold text-gray-400">
            <kbd
              class="flex items-center justify-center size-4 font-semibold text-gray-500 border rounded bg-white border-gray-200"
            >
              C
            </kbd>
          </span>
        </li>
        <!-- Add more items similarly with roles and attributes... -->
      </ul>
    </div>
  </div>
</section>