<section class="bg-white dark:bg-gray-900">
    <div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24 pt-20 sm:pt-24 lg:pt-32">
      <div class="max-w-3xl mx-auto text-center">
        <h1 class="mb-4 font-extrabold tracking-tight text-7xl lg:text-9xl text-primary-700 dark:text-primary-500">
          404
        </h1>
        <p class="mb-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
          Something's missing.
        </p>
        <p class="mb-4 text-lg text-gray-500 dark:text-gray-400">
          Sorry, we can't find that page. You'll find lots to explore on the home page.
        </p>
        <a href="#"
          class="inline-flex text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-900 my-4">
          Back to Homepage
        </a>
      </div>
    </div>
  </section>