Home
ariaw
404 Page

404 Page

This tailwind example is contributed by ariaw, on 10-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are 404 pages,Not found

404 Page

Author ariaw

667

Fork Fullscreen

<h1 class="text-5xl font-bold mb-4 text-[#6366f1] dark:text-[#818cf8]">404</h1>
            <h2 class="text-2xl font-semibold mb-4">Page Not Found</h2>
            <p class="mb-8 text-gray-600 dark:text-gray-400">
                Oops! The page you're looking for doesn't exist or has been moved.
            </p>

<div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#"
                    class="px-6 py-3 bg-[#6366f1] dark:bg-[#818cf8] text-white rounded-lg font-medium hover:opacity-90 transition-opacity">
                    Go Back Home
                </a>
                <a href="#"
                    class="px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                    Button
                </a>
            </div>
        </div>
    </div>

<footer class="py-6 text-center text-gray-500 dark:text-gray-400 text-sm">
        © 2025 Your Company. All rights reserved.
    </footer>

</body>

Related Examples

Beautiful 404 page
404 page with background image

Author:
Nikolai

1 year ago

3.1k
404 Error Page Example

Author:
Anonymous

11 months ago

1.3k
404 Error card
Error card at the center

Author:
Shakti

2 years ago

9.3k
404 page with a purple background
Here's an updated version of the 404 page with a purple background

Author:
zobaidul kaziex

1 year ago

1.3k
404 Page
The 404 Page is a responsive and customizable error page designed to inform users when they’ve reached a nonexistent or broken link. This component not only improves user experience but also provides a chance to showcase creativity and guide users back to the right path. Key Features: Fully responsive design that works on all devices. Engaging visuals (customizable images, icons, or animations). Includes a message like "Page Not Found" or "Oops! Something went wrong." Provides helpful navigation options such as a "Go Home" button or links to other pages. Easily customizable for themes, styles, and content.

Author:
Abhiraj

9 months ago

1.4k
Page not found
When lost get help to get back home

Author:
ORGIN_DREAMS

4 months ago

543
404 Error Page Example

Author:
Orson Kincaid

1 year ago

1.8k
Animated 404 Error Page Section
A modern and minimal 404 error page section built with Tailwind CSS and Alpine.js. This component features a smooth fade-in animation triggered on page load, a bold 404 error code, a short message, and a primary call-to-action button guiding users back to the homepage. ✨ Key Features: Smooth fade & slide-in animation using Alpine.js Fully responsive and optimized for mobile and dark mode Clean Tailwind CSS styling for easy customization Includes a call-to-action button for better UX Perfect for: landing pages, web apps, and portfolios that need a polished “Page Not Found” experience.

Author:
wavy kits

1 day ago

4
404 Page Not Found

Author:
KULDEEP

3 months ago

690
404 Not Found

Author:
Rajesh Maheshwari

7 months ago

1.1k
3D NotFound Page
Here's a stylish 3D-inspired 404 Not Found page component using HTML and Tailwind CSS

Author:
ishimwe prince

4 months ago

324
Simple 404 page template

Author:
Livia Flores

2 years ago

13.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components