Memphis_Monochromatic_Error_Message

<div class="p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="relative w-full max-w-sm sm:max-w-md lg:max-w-lg mx-auto bg-fuchsia-300 dark:bg-fuchsia-700 rounded-lg shadow-xl overflow-hidden transform rotate-2 dark:rotate-6 transition-all duration-500 ease-in-out hover:scale-105 hover:rotate-0">

    <!-- Background Geometric Shapes -->
    <div class="absolute inset-0 z-0">
      <div class="absolute h-32 w-32 bg-fuchsia-400 dark:bg-fuchsia-600 rounded-full -top-10 -left-10 transform translate-x-2 translate-y-2 rotate-12"></div>
      <div class="absolute h-20 w-20 bg-fuchsia-500 dark:bg-fuchsia-500 rounded-lg -bottom-8 -right-8 transform -rotate-45"></div>
      <div class="absolute h-16 w-16 bg-fuchsia-400 dark:bg-fuchsia-600 rounded-full top-1/4 right-5 opacity-70"></div>
    </div>

    <!-- Content Container -->
    <div class="relative z-10 p-6 sm:p-8 text-center">
      <div class="mb-4 sm:mb-6">
        <svg class="mx-auto h-16 w-16 sm:h-20 sm:w-20 text-fuchsia-800 dark:text-fuchsia-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <h2 class="text-2xl sm:text-3xl font-extrabold text-fuchsia-900 dark:text-fuchsia-100 mb-2 sm:mb-3 font-sans leading-tight">
        Oops! Something Went Wrong.
      </h2>
      <p class="text-base sm:text-lg text-fuchsia-800 dark:text-fuchsia-200 mb-6 sm:mb-8 font-light">
        We couldn't process your request. Please check your connection or try again later.
      </p>
      <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-fuchsia-50 dark:text-fuchsia-900 bg-fuchsia-600 dark:bg-fuchsia-300 hover:bg-fuchsia-700 dark:hover:bg-fuchsia-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400 transform -rotate-3 hover:rotate-0 transition-all duration-300 ease-in-out">
        <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
        Try Again
      </button>
    </div>
  </div>
</div>