Laravel Custom 404 Page with Tailwind CSS

Laravel 404 page

In this section, we will see a simple Laravel 404 page with Tailwind CSS template. Laravel error 404 page, tailwind page not found design, tailwind 404 page with image example with Tailwind CSS.

How to make Laravel custom 404 page?.

Follow the steps to create a Laravel 404 custom page with Tailwind CSS.

  1. Create new folder inside views directory named errors.
  2. Create blade file inside errors folder named 404.blade.php
  3. Paste this code or any custom code you want on this page.
  4. add tailwind CSS for style.
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex items-center justify-center w-screen h-screen">
  <div class="px-4 lg:py-12">
    <div class="lg:gap-4 lg:flex">
      <div
        class="flex flex-col items-center justify-center md:py-24 lg:py-32"
      >
        <h1 class="font-bold text-blue-600 text-9xl">404</h1>
        <p
          class="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl"
        >
          <span class="text-red-500">Oops!</span> Page not found
        </p>
        <p class="mb-8 text-center text-gray-500 md:text-lg">
          The page you’re looking for doesn’t exist.
        </p>
        <a
          href="#"
          class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100"
          >Go home</a
        >
      </div>
      <div class="mt-4">
        <img
          src="https://laraveller.com/img/hero.svg"
          alt="img"
          class="object-cover w-full h-full"
        />
      </div>
    </div>
  </div>
</div>