Playful Autumn Error Component

<div class="p-4 sm:p-6 lg:p-8 bg-amber-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full mx-auto rounded-3xl shadow-xl overflow-hidden p-6 sm:p-8 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-700 dark:to-gray-900 border-4 border-orange-200 dark:border-gray-700 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="flex flex-col items-center justify-center text-center">
      <div class="bg-red-500 dark:bg-red-600 rounded-full p-4 mb-6 shadow-lg">
        <svg class="h-16 w-16 text-white stroke-current" 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>
      <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-800 dark:text-orange-300 mb-4 tracking-tight drop-shadow-sm">Oopsie Daisy!</h2>
      <p class="text-lg text-orange-700 dark:text-gray-300 leading-relaxed mb-6">
        Looks like our digital squirrels chewed through some wires. We can't find what you're looking for!
      </p>
      <div class="space-y-4 w-full">
        <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 border-2 border-red-400 dark:border-red-500 rounded-full shadow-lg text-lg font-semibold text-white bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-300 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
          Go Back
        </a>
        <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 border-2 border-orange-400 dark:border-orange-500 rounded-full shadow-md text-lg font-semibold text-orange-800 dark:text-orange-200 bg-orange-200 dark:bg-gray-800 hover:bg-orange-300 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6-11h.01"></path></svg>
          Back to Homepage
        </a>
      </div>
    </div>
  </div>
</div>