Home
ishimwe prince
3D NotFound Page

3D NotFound Page

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

This tailwind example is contributed by ishimwe prince, on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are 404 pages,Not found

404 Page

Author ishimwe prince

324

Fork Fullscreen

<script src="https://cdn.tailwindcss.com"></script>
    <style>
        .perspective-container {
            perspective: 1000px;
        }
        .floating-box {
            transform-style: preserve-3d;
            animation: float 6s ease-in-out infinite;
        }
        .floating-box .front {
            transform: translateZ(20px);
        }
        .floating-box .back {
            transform: translateZ(-20px) rotateY(180deg);
        }
        .floating-box .right {
            transform: rotateY(90deg) translateZ(20px);
        }
        .floating-box .left {
            transform: rotateY(-90deg) translateZ(20px);
        }
        .floating-box .top {
            transform: rotateX(90deg) translateZ(20px);
        }
        .floating-box .bottom {
            transform: rotateX(-90deg) translateZ(20px);
        }
        @keyframes float {
            0% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
            50% { transform: translateY(-20px) rotateX(5deg) rotateY(5deg); }
            100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
        }
        .glow {
            text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4">
    <div class="perspective-container">
        <div class="floating-box relative w-64 h-64 md:w-80 md:h-80">
            
            <div class="front absolute w-full h-full bg-gray-800 border-2 border-blue-400 rounded-lg flex flex-col items-center justify-center p-4 shadow-lg">
                <div class="text-9xl font-bold text-blue-400 mb-2 glow">404</div>
                <div class="text-xl font-semibold text-blue-200">Page Not Found</div>
                <p class="text-gray-400 text-center mt-4">The page you're looking for doesn't exist or has been moved.</p>
                <a href="/" class="mt-6 px-6 py-2 bg-blue-600 hover:bg-blue-500 rounded-full text-white font-medium transition-all transform hover:scale-105">
                    Go Home
                </a>
            </div>
            
            <div class="back absolute w-full h-full bg-gray-800 border-2 border-blue-400 rounded-lg"></div>
            <div class="right absolute w-10 h-full bg-blue-600/50 left-full origin-left rounded-r-lg"></div>
            <div class="left absolute w-10 h-full bg-blue-600/50 right-full origin-right rounded-l-lg"></div>
            <div class="top absolute w-full h-10 bg-blue-600/30 bottom-full origin-bottom rounded-t-lg"></div>
            <div class="bottom absolute w-full h-10 bg-blue-600/30 top-full origin-top rounded-b-lg"></div>
        </div>
    </div>

<div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute w-2 h-2 bg-blue-400 rounded-full opacity-30" style="top: 20%; left: 15%; animation: particle 8s linear infinite;"></div>
        <div class="absolute w-3 h-3 bg-blue-500 rounded-full opacity-20" style="top: 60%; left: 25%; animation: particle 10s linear infinite 2s;"></div>
        <div class="absolute w-2 h-2 bg-blue-300 rounded-full opacity-25" style="top: 30%; left: 80%; animation: particle 12s linear infinite 1s;"></div>
        <div class="absolute w-4 h-4 bg-blue-400 rounded-full opacity-15" style="top: 80%; left: 70%; animation: particle 9s linear infinite 3s;"></div>
    </div>

Related Examples

Simple 404 page template

Author:
Livia Flores

2 years ago

13.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 days ago

4
404 Error Page
Minimal 404 for your project

Author:
TailwindFlex

3 years ago

21.5k
404 Page Not Found

Author:
KULDEEP

3 months ago

690
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 Not Found

Author:
Rajesh Maheshwari

7 months ago

1.1k
404 Error Page Example

Author:
Anonymous

11 months ago

1.3k
404 Page Example

Author:
Brandon D

3 years ago

12.5k
404 Error Page Example

Author:
Orson Kincaid

1 year ago

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

Author:
TailwindFlex

2 years ago

12.3k
Minimal server error page template

Author:
Santos78

2 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components