Components : 404 Error Page Component

Preview content adapted to proportion

404 Error Page Component

404NotFound

It is used to inform users that the page they are trying to access does not exist.

This component displays a visually engaging 404 error page with an animated design and gradient text.

The component features an interactive 'Return to Earth' button with hover and active states, as well as a floating space rocket emoji for navigation. The button has gradient colors, scale animations, and shadow effects.


The design is responsive with a minimum height of the screen (`min-h-screen`), flexbox for layout, and centered content (`items-center justify-center`). The text and buttons are appropriately sized for different screen sizes.

Date : May 29, 2025
Views : 49
Copys : 0

fa-tags

Website error handling User engagement on e-commerce platforms Portfolio or blog sites

Code

<div class="relative min-h-screen bg-[#111] flex items-center justify-center overflow-hidden">
 <div class="max-w-md px-4 py-8 text-center space-y-8 relative z-10">
  <div class="animate-pulse bg-gradient-to-r from-[#FF00CC] to-[#FF6B6B] text-transparent bg-clip-text">
   <h1 class="text-9xl font-black tracking-tighter">
    404
   </h1>
  </div>
  <div class="space-y-4">
   <h2 class="text-4xl font-bold text-[#CCC]">
    Lost in Space
   </h2>
   <p class="text-[#999] text-lg leading-relaxed">
    The page you're looking for has drifted into the cosmic void.
   </p>
  </div>
  <div class="group relative inline-block">
   <a class="inline-block px-8 py-3 text-lg font-semibold text-[#111] bg-gradient-to-r from-[#FF00CC] to-[#FF6B6B] rounded-full transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-[#FF00CC]/30 active:scale-95 focus:outline-none focus:ring-4 focus:ring-[#FF00CC]/50" href="/">
    Return to Earth 🚀
   </a>
   <div class="absolute -inset-1 blur opacity-30 bg-gradient-to-r from-[#FF00CC] to-[#FF6B6B] rounded-full transition-all group-hover:opacity-50">
   </div>
  </div>
 </div>
 <div class="absolute top-8 left-8">
  <a class="text-4xl hover:scale-110 transition-transform duration-300" href="/">
   🛸
  </a>
 </div>
 <div class="absolute inset-0 opacity-20 pointer-events-none">
  <div class="absolute top-1/4 left-1/3 w-24 h-24 bg-[#FF00CC]/30 rounded-full blur-2xl animate-pulse">
  </div>
  <div class="absolute top-2/3 right-1/4 w-32 h-32 bg-[#FF6B6B]/30 rounded-full blur-2xl animate-pulse delay-300">
  </div>
 </div>
</div>


<template>
 <div class="relative min-h-screen bg-[#111] flex items-center justify-center overflow-hidden">
  <div class="max-w-md px-4 py-8 text-center space-y-8 relative z-10">
   <div class="animate-pulse bg-gradient-to-r from-[#FF00CC] to-[#FF6B6B] text-transparent bg-clip-text">
    <h1 class="text-9xl font-black tracking-tighter">
     404
    </h1>
   </div>
   <div class="space-y-4">
    <h2 class="text-4xl font-bold text-[#CCC]">
     Lost in Space
    </h2>
    <p class="text-[#999] text-lg leading-relaxed">
     The page you're looking for has drifted into the cosmic void.
    </p>
   </div>
   <div class="group relative inline-block">
    <a class="inline-block px-8 py-3 text-lg font-semibold text-[#111] bg-gradient-to-r from-[#FF00CC] to-[#FF6B6B] rounded-full transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-[#FF00CC]/30 active:scale-95 focus:outline-none focus:ring-4 focus:ring-[#FF00CC]/50" href="/">
     Return to Earth 🚀
    </a>
    <div class="absolute -inset-1 blur opacity-30 bg-gradient-to-r from-[#FF00CC] to-[#FF6B6B] rounded-full transition-all group-hover:opacity-50">
    </div>
   </div>
  </div>
  <div class="absolute top-8 left-8">
   <a class="text-4xl hover:scale-110 transition-transform duration-300" href="/">
    🛸
   </a>
  </div>
  <div class="absolute inset-0 opacity-20 pointer-events-none">
   <div class="absolute top-1/4 left-1/3 w-24 h-24 bg-[#FF00CC]/30 rounded-full blur-2xl animate-pulse">
   </div>
   <div class="absolute top-2/3 right-1/4 w-32 h-32 bg-[#FF6B6B]/30 rounded-full blur-2xl animate-pulse delay-300">
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'My404NotFoundComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const My404NotFoundComponent = () => {
    return (
<div>
<div class="relative min-h-screen bg-[#111] flex items-center justify-center overflow-hidden">
 <div class="max-w-md px-4 py-8 text-center space-y-8 relative z-10">
  <div class="animate-pulse bg-gradient-to-r from-[#FF00CC] to-[#FF6B6B] text-transparent bg-clip-text">
   <h1 class="text-9xl font-black tracking-tighter">
    404
   </h1>
  </div>
  <div class="space-y-4">
   <h2 class="text-4xl font-bold text-[#CCC]">
    Lost in Space
   </h2>
   <p class="text-[#999] text-lg leading-relaxed">
    The page you're looking for has drifted into the cosmic void.
   </p>
  </div>
  <div class="group relative inline-block">
   <a class="inline-block px-8 py-3 text-lg font-semibold text-[#111] bg-gradient-to-r from-[#FF00CC] to-[#FF6B6B] rounded-full transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-[#FF00CC]/30 active:scale-95 focus:outline-none focus:ring-4 focus:ring-[#FF00CC]/50" href="/">
    Return to Earth 🚀
   </a>
   <div class="absolute -inset-1 blur opacity-30 bg-gradient-to-r from-[#FF00CC] to-[#FF6B6B] rounded-full transition-all group-hover:opacity-50">
   </div>
  </div>
 </div>
 <div class="absolute top-8 left-8">
  <a class="text-4xl hover:scale-110 transition-transform duration-300" href="/">
   🛸
  </a>
 </div>
 <div class="absolute inset-0 opacity-20 pointer-events-none">
  <div class="absolute top-1/4 left-1/3 w-24 h-24 bg-[#FF00CC]/30 rounded-full blur-2xl animate-pulse">
  </div>
  <div class="absolute top-2/3 right-1/4 w-32 h-32 bg-[#FF6B6B]/30 rounded-full blur-2xl animate-pulse delay-300">
  </div>
 </div>
</div>

</div>
    )
}
export default My404NotFoundComponent;

Recommended Related Components

More+

Cosmic 404 Error Page

Used to inform users when they have reached a non-existent page on a website, providing a smooth and interactive experience.

53
1

404 Error Page Component

It is used to inform users that the page they are trying to access does not exist.

49
0

404 Page Not Found Component

It is used to inform users that the requested page is not available, providing a smooth and engaging user experience.

23
0