Laravel 9 create custom 404 error page example

Hello reader, today we will see how to use custom 404 error page in laravel 9. Why you need to use 404 custom page in laravel, reason is simple for seo friendly url and good looking page. before we start you can see small tailwind css 404 page.

Tailwind CSS 404 Page Examples

Create Laravel project

composer create-project --prefer-dist laravel/laravel project-name

Next you need to create folder & 404 name blade file like this resources/views/errors/404.blade.php, Now its done just put tailwind css or bootstrap code for 404 page.

laravel 404 folder

laravel 404 folder

You can see my laravel 9 404 folder structure.

Laravel 9 custom 404 folder structure

Laravel 9 custom 404 folder structure

laravel 9 with Tailwind CSS 404 template example.


<!DOCTYPE html>
<html lang="en">

        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tailwind CSS 404 Page</title>
        <link href="^2/dist/tailwind.min.css" rel="stylesheet" />

        <div class="flex items-center justify-center w-screen h-screen  bg-gradient-to-r from-indigo-600 to-blue-400">
            <div class="px-40 py-20 bg-white rounded-md shadow-xl">
                <div class="flex flex-col items-center">
                    <h1 class="font-bold text-blue-600 text-9xl">404</h1>

                    <h6 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 class="mb-8 text-center text-gray-500 md:text-lg">
                        The page you’re looking for doesn’t exist.

                    <a href="#" class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100">Go home</a>

Laravel 404 template

Laravel 404 template