Composant Messages d’erreur

<div class="min-h-screen bg-gradient-to-br from-stone-100 via-yellow-50 to-amber-100 dark:from-stone-900 dark:via-gray-950 dark:to-neutral-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="max-w-md w-full mx-auto bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-2 border-transparent dark:border-transparent dark:hover:border-amber-700 hover:border-yellow-600">
    <div class="p-6 sm:p-8 relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-orange-200 via-amber-300 to-yellow-400 dark:from-stone-800 dark:via-neutral-700 dark:to-neutral-600 opacity-75 group-hover:opacity-100 transition-opacity duration-500"></div>
      <div class="relative z-10 text-center">
        <svg class="mx-auto h-16 w-16 text-red-600 dark:text-red-400 animate-bounce transition-colors duration-300" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <h2 class="mt-4 text-3xl font-extrabold text-stone-800 dark:text-stone-100 tracking-tight sm:text-4xl transition-colors duration-300">Oops! Something Went Wrong</h2>
        <p class="mt-4 text-lg leading-relaxed text-stone-600 dark:text-stone-300 transition-colors duration-300">
          It seems like we encountered an unexpected issue while processing your request. Please try again or contact support.
        </p>
        <div class="mt-8 space-y-4">
          <button class="w-full px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-r from-orange-600 to-amber-700 hover:from-orange-700 hover:to-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50 shadow-lg transform transition-all duration-300 active:scale-95 ease-in-out dark:from-amber-700 dark:to-orange-800 dark:hover:from-amber-800 dark:hover:to-orange-900 dark:focus:ring-orange-600">
            Try Again
          </button>
          <a href="#" class="w-full inline-flex items-center justify-center px-6 py-3 border-2 border-stone-400 dark:border-stone-600 rounded-full text-lg font-medium text-stone-700 dark:text-stone-300 bg-white dark:bg-neutral-700 hover:bg-stone-50 hover:border-stone-500 dark:hover:bg-neutral-600 dark:hover:border-stone-500 focus:outline-none focus:ring-4 focus:ring-stone-400 focus:ring-opacity-50 shadow-md transform transition-all duration-300 active:scale-95 ease-in-out">
            <svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.887 8.887 0 01-3.696-.807l-3.377.94-.807-3.377A8.887 8.887 0 013 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM9.002 9a1 1 0 100 2 1 1 0 000-2zM13 9a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
            </svg>
            Contact Support
          </a>
        </div>
      </div>
    </div>
    <div class="px-6 py-4 bg-stone-50 dark:bg-neutral-900 border-t border-stone-200 dark:border-neutral-700 text-center text-sm text-stone-500 dark:text-stone-400 transition-colors duration-300">
      <p>Error Code: <span class="font-semibold text-stone-600 dark:text-stone-300">500 Internal Server Error</span></p>
    </div>
  </div>
</div>