Components : Cosmic 404 Error Page

Preview content adapted to proportion

Cosmic 404 Error Page

404NotFound

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

Displays a visually engaging 404 error message with animated elements and a call-to-action button.

Interaction:

The page includes an animated 'Return Home' button that scales up and changes shadow on hover, engaging users to navigate back.

Responsive:

The layout adjusts responsively with a grid system that changes to a single column on smaller screens, ensuring readability and aesthetic appeal across devices.

Date : June 03, 2025

Copys : 1

fa-tags

Error handling on websites, landing pages, portfolio sites, e-commerce platforms

Code

<div class="min-h-screen bg-gray-900 flex items-center justify-center p-4">
 <div class="max-w-6xl w-full grid md:grid-cols-12 gap-8 relative overflow-hidden">
  <div class="md:col-span-7 flex flex-col items-center md:items-start space-y-6 text-center md:text-left">
   <h1 class="text-8xl font-black bg-gradient-to-r from-emerald-400 to-cyan-500 bg-clip-text text-transparent animate-pulse">
    404
   </h1>
   <p class="text-xl text-gray-400 mb-8">
    Page lost in cosmic void. Let's navigate back home.
   </p>
   <button class="bg-cyan-600 hover:bg-cyan-500 text-white px-8 py-3 rounded-full transform transition-all duration-300 hover:scale-105 hover:shadow-cyan-glow font-semibold flex items-center gap-2">
    🚀 Return Home
   </button>
  </div>
  <div class="md:col-span-5 relative flex items-center justify-center">
   <div class="absolute w-72 h-72 bg-gradient-to-r from-emerald-400/20 to-cyan-500/20 blur-2xl rounded-full animate-spin-slow">
   </div>
   <div class="relative text-8xl space-y-4">
    <div class="animate-float">
     🌌
    </div>
    <div class="w-full h-1 bg-gradient-to-r from-emerald-400 to-cyan-500 rounded-full">
    </div>
   </div>
  </div>
  <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-cyan-500/10 rounded-full blur-xl">
  </div>
  <div class="absolute -top-20 -left-20 w-64 h-64 bg-emerald-400/10 rounded-full blur-xl">
  </div>
 </div>
</div>

<template>
 <div class="min-h-screen bg-gray-900 flex items-center justify-center p-4">
  <div class="max-w-6xl w-full grid md:grid-cols-12 gap-8 relative overflow-hidden">
   <div class="md:col-span-7 flex flex-col items-center md:items-start space-y-6 text-center md:text-left">
    <h1 class="text-8xl font-black bg-gradient-to-r from-emerald-400 to-cyan-500 bg-clip-text text-transparent animate-pulse">
     404
    </h1>
    <p class="text-xl text-gray-400 mb-8">
     Page lost in cosmic void. Let's navigate back home.
    </p>
    <button class="bg-cyan-600 hover:bg-cyan-500 text-white px-8 py-3 rounded-full transform transition-all duration-300 hover:scale-105 hover:shadow-cyan-glow font-semibold flex items-center gap-2">
     🚀 Return Home
    </button>
   </div>
   <div class="md:col-span-5 relative flex items-center justify-center">
    <div class="absolute w-72 h-72 bg-gradient-to-r from-emerald-400/20 to-cyan-500/20 blur-2xl rounded-full animate-spin-slow">
    </div>
    <div class="relative text-8xl space-y-4">
     <div class="animate-float">
      🌌
     </div>
     <div class="w-full h-1 bg-gradient-to-r from-emerald-400 to-cyan-500 rounded-full">
     </div>
    </div>
   </div>
   <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-cyan-500/10 rounded-full blur-xl">
   </div>
   <div class="absolute -top-20 -left-20 w-64 h-64 bg-emerald-400/10 rounded-full blur-xl">
   </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="min-h-screen bg-gray-900 flex items-center justify-center p-4">
 <div class="max-w-6xl w-full grid md:grid-cols-12 gap-8 relative overflow-hidden">
  <div class="md:col-span-7 flex flex-col items-center md:items-start space-y-6 text-center md:text-left">
   <h1 class="text-8xl font-black bg-gradient-to-r from-emerald-400 to-cyan-500 bg-clip-text text-transparent animate-pulse">
    404
   </h1>
   <p class="text-xl text-gray-400 mb-8">
    Page lost in cosmic void. Let's navigate back home.
   </p>
   <button class="bg-cyan-600 hover:bg-cyan-500 text-white px-8 py-3 rounded-full transform transition-all duration-300 hover:scale-105 hover:shadow-cyan-glow font-semibold flex items-center gap-2">
    🚀 Return Home
   </button>
  </div>
  <div class="md:col-span-5 relative flex items-center justify-center">
   <div class="absolute w-72 h-72 bg-gradient-to-r from-emerald-400/20 to-cyan-500/20 blur-2xl rounded-full animate-spin-slow">
   </div>
   <div class="relative text-8xl space-y-4">
    <div class="animate-float">
     🌌
    </div>
    <div class="w-full h-1 bg-gradient-to-r from-emerald-400 to-cyan-500 rounded-full">
    </div>
   </div>
  </div>
  <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-cyan-500/10 rounded-full blur-xl">
  </div>
  <div class="absolute -top-20 -left-20 w-64 h-64 bg-emerald-400/10 rounded-full blur-xl">
  </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.

404 Error Page Component

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

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.