Retro_Vintage_Error_Message_Rainbow_Gradient

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="relative w-full max-w-2xl overflow-hidden rounded-xl shadow-2xl transform hover:scale-[1.01] transition-all duration-500 will-change-transform
              bg-gradient-to-br from-red-500 via-yellow-500 to-indigo-500
              dark:from-blue-600 dark:via-purple-600 dark:to-pink-600
              p-1 border-4 border-solid border-white dark:border-gray-700 ">

    <div class="relative z-10 p-8 sm:p-12 md:p-16 rounded-lg bg-gray-900 dark:bg-gray-800 
                text-gray-100 dark:text-gray-200 
                border-4 border-gray-800 dark:border-gray-900 
                outline outline-4 outline-offset-[-16px] outline-gray-700 dark:outline-gray-700 ">

      <div class="absolute top-0 left-0 w-full h-[60px] bg-gradient-to-r from-teal-400 via-fuchsia-500 to-purple-600 rounded-t-lg 
                  dark:from-lime-400 dark:via-cyan-500 dark:to-blue-600 
                  clip-path-polygon-[0%_0%,_100%_0%,_95%_100%,_5%_100%] z-0"></div>

      <div class="relative z-10 flex flex-col items-center justify-center text-center space-y-8">
        <div class="flex items-center justify-center p-4 w-24 h-24 sm:w-28 sm:h-28 rounded-full shadow-lg 
                    bg-gradient-to-br from-red-400 to-purple-500 dark:from-green-400 dark:to-blue-500 
                    animate-pulse-slow border-4 border-white dark:border-gray-700">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white transform -rotate-12"
               xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>

        <div class="space-y-4">
          <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight 
                     font-['Press_Start_2P',_cursive] 
                     text-yellow-300 dark:text-cyan-300 
                     drop-shadow-lg [text-shadow:_0_0_8px_rgb(255_0_255_/_0.8),_0_0_12px_rgb(0_255_255_/_0.8)] leading-tight">
            SYSTEM GLITCH!
          </h1>
          <p class="text-lg sm:text-xl md:text-2xl font-semibold 
                    font-['VT323',_monospace] 
                    text-gray-300 dark:text-gray-400 
                    tracking-wide leading-relaxed">
            ERROR <span class="text-red-400 dark:text-orange-400">404</span> - COURSE DATA NOT FOUND.
          </p>
          <p class="text-base sm:text-lg md:text-xl 
                    font-['Pixelify_Sans',_cursive] 
                    text-gray-400 dark:text-gray-500 
                    max-w-prose mx-auto">
            It seems your educational quest has reached a dead end. The requested module is currently offline or has been rerouted to a parallel universe. Please check your coordinates or try a different pathway.
          </p>
        </div>

        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6 w-full justify-center">
          <a href="#" class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden 
                               text-lg font-medium text-gray-900 rounded-lg group 
                               bg-gradient-to-br from-purple-600 to-blue-500 
                               group-hover:from-purple-600 group-hover:to-blue-500 
                               hover:text-white dark:text-white 
                               focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 
                               shadow-xl transform hover:scale-105 transition duration-300 ease-in-out 
                               w-full sm:w-auto min-w-[200px] sm:min-w-[180px]">
            <span class="relative px-5 py-4 transition-all ease-in duration-75 
                         bg-white dark:bg-gray-900 rounded-md 
                         group-hover:bg-opacity-0 text-black dark:text-white 
                         text-lg sm:text-xl md:text-2xl 
                         font-['Press_Start_2P',_cursive] border-2 border-transparent group-hover:border-white">
              REBOOT SYSTEM
            </span>
          </a>
          <a href="#" class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden 
                               text-lg font-medium text-gray-900 rounded-lg group 
                               bg-gradient-to-br from-pink-500 to-orange-400 
                               group-hover:from-pink-500 group-hover:to-orange-400 
                               hover:text-white dark:text-white 
                               focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 
                               shadow-xl transform hover:scale-105 transition duration-300 ease-in-out 
                               w-full sm:w-auto min-w-[200px] sm:min-w-[180px]">
            <span class="relative px-5 py-4 transition-all ease-in duration-75 
                         bg-white dark:bg-gray-900 rounded-md 
                         group-hover:bg-opacity-0 text-black dark:text-white 
                         text-lg sm:text-xl md:text-2xl 
                         font-['Press_Start_2P',_cursive] border-2 border-transparent group-hover:border-white">
              CONTACT HELP
            </span>
          </a>
        </div>

        <div class="text-sm text-gray-500 dark:text-gray-600 font-['VT323',_monospace] mt-8">
          <p>&copy; 1989-2023 SYNTHWAVE ACADEMY. All rights reserved.</p>
          <p>Debug Code: #RETROGLITCH-X0C3</p>
        </div>

        <!-- Retro Scanline Overlay -->
        <div class="absolute inset-0 pointer-events-none opacity-10">
          <div class="w-full h-full bg-repeat" style="background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.25) 50%), linear-gradient(90deg, rgba(255,0,255,.06), rgba(0,255,255,.02)); background-size: 100% 4px, 4px 100%;"></div>
        </div>

      </div>
    </div>
  </div>
</div>

<!-- Google Fonts for Retro Look -->
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Pixelify+Sans&display=swap" rel="stylesheet">