Home
Nomthandazo Mhlongo
Animated 404 Page

Animated 404 Page

This tailwind example is contributed by Nomthandazo Mhlongo, on 21-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are 404 pages,Not found

404 Page

Author Nomthandazo Mhlongo

1.7k

Fork Fullscreen

<div class="bg-orange-50 min-h-screen flex items-center justify-center">
    <main class="container mx-auto px-4 text-center pt-12 md:pt-20">
        <h1 class="text-6xl lg:text-8xl font-bold text-orange-600 mb-6" aria-label="404 - Page not found">
            4<span class="inline-block">0</span>4
        </h1>
        <p class="text-xl lg:text-2xl text-orange-800 mb-8">Oops! The page you're looking for has vanished.</p>
        <a href="#"
            class="inline-block py-3 px-6 bg-orange-500 text-white font-semibold rounded-full hover:bg-orange-600 transition duration-300 mb-12 focus:outline-none focus:ring-2 focus:ring-orange-300"
            aria-label="Go back to home page">
            Take Me Home.
        </a>
        <div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto" aria-hidden="true">
            
        </div>
    </main>
</div>

// Animate squares
        gsap.from('.grid div', {
            scale: 0,
            opacity: 0,
            duration: 0.5,
            stagger: 0.02,
            ease: 'back.out(1.7)',
            yoyo: true,
            repeat: -1,
            repeatDelay: 1
        });

// Animate 404 text
        gsap.to('h1 span', {
            rotationY: 360,
            duration: 2,
            ease: 'elastic.out(1, 0.3)',
            repeat: -1,
            repeatDelay: 3
        });
</script>

Related Examples

404 Error Page Example

Author:
Anonymous

1 year ago

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

10 months ago

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

Author:
ORGIN_DREAMS

6 months ago

759
Minimal server error page template

Author:
Santos78

2 years ago

13.2k
404 Not Found

Author:
Rajesh Maheshwari

9 months ago

1.3k
Simple 404 page template

Author:
Livia Flores

2 years ago

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

Author:
Zayyan Mustafa

9 months ago

1k
plugin
test description

Author:
Anonymous

1 year ago

1.9k
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 month ago

155
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.5k
Minimal 404 page

Author:
Santos78

2 years ago

11.4k
Beautiful 404 page
404 page with background image

Author:
Nikolai

1 year ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components