Home
Abhiraj
404 Page

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.

This tailwind example is contributed by Abhiraj, on 11-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are 404 Pages, Not found,caution,404 pages,Not found

Error Page Alert 404 Page

Author Abhiraj

853

Fork Fullscreen

<!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 | Abhiraj K</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"></script>
    <style>
        .space-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle var(--duration) ease-in-out infinite;
            opacity: 0;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }
        
        .ufo-beam {
            animation: beam 2s ease-in-out infinite;
            transform-origin: top;
        }
        
        @keyframes beam {
            0%, 100% { transform: scaleY(0.8); opacity: 0.3; }
            50% { transform: scaleY(1.1); opacity: 0.7; }
        }
        
        .hidden-link {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .error-container:hover .hidden-link {
            opacity: 1;
        }
        
        .meteor {
            position: absolute;
            width: 2px;
            height: 2px;
            background: linear-gradient(45deg, #ffffff, transparent);
            animation: meteor 2s linear infinite;
            transform: rotate(45deg);
        }
        
        @keyframes meteor {
            0% { transform: translate(0, 0) rotate(45deg); opacity: 1; }
            100% { transform: translate(-100px, 100px) rotate(45deg); opacity: 0; }
        }
        
        .astronaut-wave {
            animation: wave 2s ease-in-out infinite;
            transform-origin: 70% 70%;
        }
        
        @keyframes wave {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(20deg); }
        }

.portal {
            animation: portal-spin 8s linear infinite;
        }

@keyframes portal-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4 overflow-hidden">
    
    <div id="stars" class="fixed inset-0"></div>

<div class="error-container relative z-10 text-center">
        
        <div class="relative space-animation mb-8">
            <svg class="w-32 h-32 mx-auto" viewBox="0 0 100 100">
                
                <ellipse cx="50" cy="40" rx="30" ry="10" fill="#4F46E5"/>
                <circle cx="50" cy="35" r="20" fill="#818CF8"/>
                <ellipse cx="50" cy="30" rx="10" ry="5" fill="#C7D2FE"/>
                
                <path class="ufo-beam" d="M40 40 L30 80 L70 80 L60 40" fill="rgba(79, 70, 229, 0.2)"/>
            </svg>
        </div>

<h1 class="text-8xl font-bold text-white mb-4 space-animation">4
            <span class="inline-block portal">0</span>4</h1>
        <p class="text-xl text-blue-200 mb-8">Oops! Looks like you've wandered into space!</p>

<div class="space-y-4">
            
            <a href="https://abhirajk.vercel.app" 
               class="hidden-link text-blue-400 hover:text-blue-300 transition block">
                ← Find your way back to safety
            </a>

<div class="relative inline-block space-animation">
                <img src="https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722165/AbhirajK/Abhirajk.webp" 
                     alt="Astronaut" 
                     class="w-24 h-24 rounded-full object-cover border-4 border-white mx-auto astronaut-wave">
                <span class="absolute -top-2 -right-2 w-6 h-6 bg-green-500 rounded-full border-4 border-white"></span>
            </div>

<div class="flex justify-center space-x-4 mt-8">
                <a href="https://abhirajk.vercel.app" 
                   class="px-6 py-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transform hover:scale-105 transition">
                    Return Home
                </a>
                <button onclick="window.history.back()" 
                        class="px-6 py-3 bg-purple-600 text-white rounded-full hover:bg-purple-700 transform hover:scale-105 transition">
                    Go Back
                </button>
            </div>
        </div>

<div class="mt-8 text-gray-500 cursor-pointer hover:text-gray-400 transition">
            <p class="text-sm">Press 'Space' for a surprise!</p>
        </div>
    </div>

// Create meteors
        setInterval(() => {
            const meteor = document.createElement('div');
            meteor.className = 'meteor';
            meteor.style.top = `${Math.random() * 100}%`;
            meteor.style.left = '100%';
            document.body.appendChild(meteor);
            setTimeout(() => meteor.remove(), 2000);
        }, 3000);

// Space key easter egg
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') {
                document.body.style.background = `hsl(${Math.random() * 360}, 50%, 15%)`;
                setTimeout(() => document.body.style.background = '', 500);
            }
        });
    </script>
</body>
</html>

Related Examples

404 Error Page
Minimal 404 for your project

Author:
TailwindFlex

2 years ago

20.9k
404 Page Example

Author:
Brandon D

2 years ago

12k
Minimal server error page template

Author:
Santos78

2 years ago

12.8k
404 Error Page Example

Author:
Orson Kincaid

8 months ago

1.6k
404 Error Page Example

Author:
Anonymous

7 months ago

1.3k
404 Error Page Example

Author:
Anonymous

7 months ago

1.1k
404 Error
This HTML page displays a 404 error with a 'Back to home' button, styled using Tailwind CSS.

Author:
Zayyan Mustafa

4 months ago

553
404 Not Found

Author:
Rajesh Maheshwari

4 months ago

755
Page not found
When lost get help to get back home

Author:
ORGIN_DREAMS

1 month ago

166
Alert panel
Alert panel using

Author:
muhittin budak

2 months ago

373
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

5 months ago

533
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

194

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components