404 Page with Search using Tailwind UI Component

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  .section {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
</style>

<section class="bg-white mx-auto py-10">
  <div class="container min-h-screen px-8 lg:px-16 lg:mx-10 lg:flex lg:items-center lg:gap-x-10">
    <div class="relative w-full lg:w-1/2 mb-4 lg:mb-0">
      <img class="w-full lg:h-[40rem] h-60 md:h-96 object-cover"
        src="https://res.cloudinary.com/daqsjyrgg/image/upload/v1689660980/404/y7m5mz7zcksepqwifvkg.svg"
        alt="Illustration 404">
    </div>
    <div class="w-full lg:w-1/2">
      <span
        class="inline-flex items-center px-2.5 lg:py-2 py-1 rounded-full text-xs lg:text-sm font-medium bg-green-500 text-white">
        Page not found
      </span>

      <h1 class=" mt-3 text-3xl font-extrabold text-gray-800 md:text-5xl">Oops! Something went wrong 😢</h1>
      <p class="mt-4 text-sm md:text-lg text-gray-500 md:mr-10">It looks like you've lost your way on the wrong track.
        We could not find the page you are looking for. Don't worry, we are here to help!</p>

      <div class="flex items-center mt-6 gap-x-3">
        <div class="relative w-full md:w-2/3">
          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd"
                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                clip-rule="evenodd"></path>
            </svg>
          </div>
          <form action="">
            <input type="text" id="voice-search"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5"
              placeholder="Search our site" required>
          </form>
        </div>
      </div>

      <div class="mt-10 space-y-6">
        <div>
          <a href="#" class="inline-flex items-center text-sm text-green-500 gap-x-2 hover:underline">
            <span>Back to homepage</span>

            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-5 h-5 rtl:rotate-180">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
            </svg>
          </a>
          <p class="mt-2 text-sm text-gray-500 ">You can return to the previous page.</p>
        </div>

        <div>
          <a href="#" class="inline-flex items-center text-sm text-green-500 gap-x-2 hover:underline">
            <span>Chat to support</span>

            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-5 h-5 rtl:rotate-180">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
            </svg>
          </a>
          <p class="mt-2 text-sm text-gray-500 ">Our friendly team is here to help.</p>
        </div>
      </div>
    </div>
  </div>
</section>