Application Empty States No results found Dark

<div class="max-w-md text-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="mx-auto size-20 text-gray-400 dark:text-gray-500"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
        />
      </svg>

      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">No results found</h2>

      <p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
        Try adjusting your search or filters to find what you're looking for.
      </p>

      <div class="mt-6 space-y-2">
        <input
          type="text"
          placeholder="Search again..."
          class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
        />

        <button
          class="block w-full rounded-lg border border-gray-300 px-6 py-3 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800"
        >
          Clear filters
        </button>
      </div>

      <p class="mt-6 text-sm text-gray-700 dark:text-gray-200">
        <a href="#" class="underline transition-colors hover:text-gray-900 dark:hover:text-white"
          >Contact support</a
        >
        if you need help
      </p>
    </div>