Components : 404 Page Not Found Component

Preview content adapted to proportion

404 Page Not Found Component

404NotFound

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

This component displays a 404 error page with a visually appealing design, featuring animations and interactive elements.

Interaction:

The component includes interactive elements such as a hoverable title, an animated marquee text, and a clickable button that returns the user to the homepage.

Responsive:

The design is responsive, ensuring it adapts to different screen sizes with a flex layout, gradient backgrounds, and properly positioned elements.

Date : June 16, 2025

Copys : 0

fa-tags

Error pages, User interface design, Web applications, Portfolio websites

Code

<div class="flex flex-wrap items-center justify-center min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800 relative overflow-hidden">
 <div class="absolute inset-0 bg-black/30 backdrop-blur-xl">
 </div>
 <div class="relative max-w-4xl w-full px-4 py-16 space-y-8 text-center group">
  <div class="animate-spin-slow bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text">
   <h1 class="text-[280px] font-black leading-none text-transparent opacity-80">
    404
   </h1>
  </div>
  <div class="space-y-6">
   <h2 class="text-5xl font-bold text-cyan-100 transition-all duration-500 group-hover:scale-105">
    Page Not Found
   </h2>
   <p class="text-xl text-purple-100/90 font-medium animate-marquee">
    The requested page may have been moved or deleted
   </p>
  </div>
  <div class="flex justify-center gap-4">
   <button class="flex items-center px-8 py-4 bg-cyan-500/20 rounded-2xl backdrop-blur-lg hover:bg-cyan-400/30 transition-all duration-300 hover:scale-[1.02]">
    <span class="text-cyan-100 text-lg font-semibold mr-2">
     🚀
    </span>
    <span class="text-cyan-100 text-lg font-semibold">
     Back to Home
    </span>
   </button>
  </div>
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full border-[6px] border-purple-400/20 animate-pulse">
  </div>
  <div class="absolute -top-32 -right-32 w-96 h-96 bg-purple-400/10 rounded-full blur-3xl animate-float">
  </div>
 </div>
</div>

<template>
 <div class="flex flex-wrap items-center justify-center min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800 relative overflow-hidden">
  <div class="absolute inset-0 bg-black/30 backdrop-blur-xl">
  </div>
  <div class="relative max-w-4xl w-full px-4 py-16 space-y-8 text-center group">
   <div class="animate-spin-slow bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text">
    <h1 class="text-[280px] font-black leading-none text-transparent opacity-80">
     404
    </h1>
   </div>
   <div class="space-y-6">
    <h2 class="text-5xl font-bold text-cyan-100 transition-all duration-500 group-hover:scale-105">
     Page Not Found
    </h2>
    <p class="text-xl text-purple-100/90 font-medium animate-marquee">
     The requested page may have been moved or deleted
    </p>
   </div>
   <div class="flex justify-center gap-4">
    <button class="flex items-center px-8 py-4 bg-cyan-500/20 rounded-2xl backdrop-blur-lg hover:bg-cyan-400/30 transition-all duration-300 hover:scale-[1.02]">
     <span class="text-cyan-100 text-lg font-semibold mr-2">
      🚀
     </span>
     <span class="text-cyan-100 text-lg font-semibold">
      Back to Home
     </span>
    </button>
   </div>
   <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full border-[6px] border-purple-400/20 animate-pulse">
   </div>
   <div class="absolute -top-32 -right-32 w-96 h-96 bg-purple-400/10 rounded-full blur-3xl animate-float">
   </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="flex flex-wrap items-center justify-center min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800 relative overflow-hidden">
 <div class="absolute inset-0 bg-black/30 backdrop-blur-xl">
 </div>
 <div class="relative max-w-4xl w-full px-4 py-16 space-y-8 text-center group">
  <div class="animate-spin-slow bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text">
   <h1 class="text-[280px] font-black leading-none text-transparent opacity-80">
    404
   </h1>
  </div>
  <div class="space-y-6">
   <h2 class="text-5xl font-bold text-cyan-100 transition-all duration-500 group-hover:scale-105">
    Page Not Found
   </h2>
   <p class="text-xl text-purple-100/90 font-medium animate-marquee">
    The requested page may have been moved or deleted
   </p>
  </div>
  <div class="flex justify-center gap-4">
   <button class="flex items-center px-8 py-4 bg-cyan-500/20 rounded-2xl backdrop-blur-lg hover:bg-cyan-400/30 transition-all duration-300 hover:scale-[1.02]">
    <span class="text-cyan-100 text-lg font-semibold mr-2">
     🚀
    </span>
    <span class="text-cyan-100 text-lg font-semibold">
     Back to Home
    </span>
   </button>
  </div>
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full border-[6px] border-purple-400/20 animate-pulse">
  </div>
  <div class="absolute -top-32 -right-32 w-96 h-96 bg-purple-400/10 rounded-full blur-3xl animate-float">
  </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.