Creating a Stylish 404 Not Found Page in React with Tailwind CSS

A well-designed 404 Not Found page can greatly improve user experience on your website. In this article, I'll show you how to create a visually appealing 404 page using React and Tailwind CSS. This page will have a sleek design with a gradient background and a message guiding users back to the home page.

**

What You Will Learn

**
Setting up a NotFound component in React
Styling the component with Tailwind CSS
Implementing the NotFound component in your React Router setup
**

Prerequisites

**
Before you begin, ensure you have the following:

Basic knowledge of React
Tailwind CSS installed in your React project
**

Step-by-Step Guide

**
**

1. Create the NotFound Component

**
First, create a new file named NotFound.jsx in your src directory.

import React from 'react';
import { Link } from 'react-router-dom';

const NotFound = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-black text-white">
      <div className="text-9xl font-bold flex items-center justify-center">
        <span className="relative">
          <span className="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 rounded-full blur-2xl"></span>
          <span className="relative">4</span>
        </span>
        <span className="relative">
          <span className="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 rounded-full blur-2xl"></span>
          <span className="relative">0</span>
        </span>
        <span className="relative">
          <span className="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 rounded-full blur-2xl"></span>
          <span className="relative">4</span>
        </span>
      </div>
      <p className="mt-4 text-lg">This page doesn't exist. <Link to="/" className="text-pink-500 hover:underline">Go back home.</Link></p>
    </div>
  );
};

export default NotFound;

**

2. Styling with Tailwind CSS

**
In the code above, Tailwind CSS is used to style the NotFound component:

Container: The div is centered both vertically and horizontally with flex flex-col items-center justify-center min-h-screen bg-black text-white.
404 Text: The large "404" text is styled with text-9xl font-bold.
Gradient and Blur Effect: The gradient and blur effect are added with relative, absolute, bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 rounded-full blur-2xl.

1. Update Your Routing To ensure this 404 page is displayed for any undefined route, update your React Router setup.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import NotFound from './NotFound';
// Import other components...

function App() {
  return (
    <Router>
      <Switch>
        {/* Define other routes here... */}
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}

export default App;

This setup ensures that any undefined route will display the NotFound component.

**

4. Test Your 404 Page

**
Run your development server and navigate to a non-existent route to see your new 404 page in action.

**

Conclusion
**
Creating a stylish 404 Not Found page using React and Tailwind CSS is straightforward and enhances the user experience. By following this guide, you can build a visually appealing page that gently guides users back to the main content of your site.

Feel free to share your thoughts or any improvements in the comments below. Happy coding!