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

603

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