Creating a Stylish 404 Not Found Page in React with Tailwind CSS
Devmaster
Posted on August 2, 2024
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.
- 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!
Posted on August 2, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.