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

699

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

404 Error Page Example

Author:
Anonymous

1 year ago

1.7k
404 Error Page Example

Author:
Anonymous

1 year ago

1.5k
Minimal 404 page

Author:
Santos78

2 years ago

11.7k
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

2 months ago

271
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

11 months ago

1.9k
Minimal 404 Page Template

Author:
Lautaro Gómez

1 year ago

2.3k
Simple 404 page template

Author:
Livia Flores

2 years ago

14.1k
404 Page Not Found

Author:
KULDEEP

6 months ago

1.1k
Minimal server error page template

Author:
Santos78

2 years ago

13.3k
404 page template
Minimal 404-page template for tailwind css

Author:
TailwindFlex

2 years ago

12.6k
404 Error card
Error card at the center

Author:
Shakti

2 years ago

9.4k
404 Not Found

Author:
Rajesh Maheshwari

9 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components