tailwind-ai/components/application_ui/navigation/command_palettes/with_groups.html

<!-- 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>