tailwind-ai/components/application_ui/navigation/command_palettes/simple_with_padding.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 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>