How To Create 404 Pages in Tailwind CSS?

Last Updated : 01 Oct, 2024

Creating a 404 error page using Tailwind CSS is simple and effective. Tailwind CSS allows you to quickly style and layout your page using its utility-first CSS framework.

In this article, we'll see the process of designing a custom 404 page with an engaging design to keep users informed and on track when they land on a page that page doesn’t exist.

These are the following methods through which we can create 404 Pages

Table of Content

Creating Simple 404 Pages
Creating Animated 404 Pages

Creating Simple 404 Pages

We will create a simple yet visually appealing 404 page. This page will include a title, an error message, and a button to guide users back to the homepage. Here’s the basic structure:

Example: Here’s the basic structure of the 404 Pages

HTML

<!-- index.html -->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Not Found</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
          rel="stylesheet">
</head>

<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="text-center">
        <h1 class="text-6xl font-bold text-red-500">404</h1>
        <p class="text-2xl mt-4 text-gray-700">Oops! Page not found.</p>
        <p class="mt-2 text-gray-500">The page you're looking for doesn't 
          exist or has been moved.</p>
        <a href="/"
            class="mt-6 inline-block bg-blue-500 text-white px-4 py-2 
                   rounded-lg shadow hover:bg-blue-600 transition duration-300">Go
            Back Home</a>
    </div>
</body>

</html>

Output:

Creating Animated 404 Pages

We can easily customize the page by changing the text, colors, or layout according to your needs. For example, you could add an image, a search bar, or more links to help users navigate back to relevant content. To make it more engaging, you can also include animations or interactive elements, such as a hover effect on the 404 text or an animated background.

Example: In this example, we will use the hover effect on the 404 text

HTML

<!-- index.html -->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>404 - Page Not Found</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="text-center bg-white p-8 rounded-lg shadow-lg">
        <h1 class="text-6xl font-bold text-red-500 animate-bounce">404</h1>
        <p class="text-2xl mt-4 text-gray-700">Oops! We can't find that page.</p>
        <a href="/"
            class="mt-6 inline-block bg-blue-500 text-white px-4 py-2 
                   rounded-lg hover:bg-blue-600 transition">Back to
            Home</a>
    </div>
</body>


</html>

Output:

How to Install Tailwind CSS with Create React App?

prathamsahani2020

Improve

Article Tags :

How To Create 404 Pages in Tailwind CSS?

Creating Simple 404 Pages

Creating Animated 404 Pages

Similar Reads

Thank You!

What kind of Experience do you want to share?