Cerca componenti

Categorie

Componenti Messaggi di errore

Messaggi di errore

Notifiche di errori o problemi

Componente Messaggi di errore

Un componente reattivo per i messaggi di errore con sfumature di tonalità della terra, transizioni fluide e supporto per la modalità oscura, adatto per siti Web di consulenza/servizi.

Aperto Anteprima

                <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>

RetroReservationErrorMessage

Un semplice componente per messaggi di errore in stile retrò/vintage per i sistemi di prenotazione, caratterizzato da colori ad alto contrasto e piena reattività con supporto della modalità scura.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-mono">
  <div class="max-w-md w-full p-6 sm:p-8 rounded-lg shadow-xl border-4 border-red-500 bg-white dark:bg-gray-700 transform transition-all duration-300 hover:scale-105">
    <div class="flex items-center justify-center mb-6">
      <svg class="h-12 w-12 text-red-500 mr-3 animate-pulse" 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="text-3xl font-extrabold text-red-600 dark:text-red-400 uppercase tracking-wider">Error!</h2>
    </div>
    <p class="text-center text-lg text-gray-800 dark:text-gray-200 mb-6 leading-relaxed">
      <span class="block font-bold mb-2">Booking Failed.</span>
      It looks like there was an issue with your reservation.
    </p>
    <ul class="list-none p-0 mb-6 space-y-2 text-gray-700 dark:text-gray-300">
      <li class="flex items-center text-md">
        <span class="text-red-500 mr-2 text-xl">&rsaquo;</span> The selected time slot is no longer available.
      </li>
      <li class="flex items-center text-md">
        <span class="text-red-500 mr-2 text-xl">&rsaquo;</span> Please check your internet connection and try again.
      </li>
      <li class="flex items-center text-md">
        <span class="text-red-500 mr-2 text-xl">&rsaquo;</span> Contact support if the issue persists.
      </li>
    </ul>
    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="flex-1 w-full sm:w-auto px-6 py-3 bg-red-600 text-white font-bold rounded-md uppercase text-lg tracking-wide shadow-lg transform transition-all duration-200 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
        Try Again
      </button>
      <button class="flex-1 w-full sm:w-auto px-6 py-3 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold rounded-md uppercase text-lg tracking-wide shadow-lg transform transition-all duration-200 hover:bg-gray-400 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-75">
        Go Back
      </button>
    </div>
    <div class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
      Error Code: BK-RSV-001 | Date: 2023-10-27
    </div>
  </div>
</div>

Retro_Vintage_Error_Message_Rainbow_Gradient

Un complesso componente di messaggio di errore a tema retrò/vintage per piattaforme educative, caratterizzato da uno sfondo sfumato arcobaleno ed estetica anni '80/'90, completamente reattivo con supporto per la modalità oscura.

Aperto Anteprima

                <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">

Messaggio di errore immobiliare

Un componente di messaggio di errore professionale e pulito progettato per le piattaforme immobiliari, caratterizzato da una combinazione di colori monocromatica, reattività completa e supporto per la modalità oscura.

Aperto Anteprima

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-700">
    <div class="p-6 sm:p-8 text-center">
      <div class="flex justify-center mb-4">
        <svg class="w-16 h-16 text-red-500 dark:text-red-400" 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>
      </div>
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3">Property Not Found</h2>
      <p class="text-gray-600 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
        We couldn't find the property you're looking for. It might have been sold, removed, or the link is incorrect.
      </p>
      <div class="space-y-3 sm:space-y-0 sm:space-x-3 sm:flex sm:justify-center">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
          <svg class="-ml-1 mr-2 h-5 w-5" 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 0h6"></path>
          </svg>
          Go to Homepage
        </a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
          <svg class="-ml-1 mr-2 h-5 w-5" 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="M7 8h10M7 12h4m1-8a9 9 0 00-9 9 9 9 0 009 9 9 9 0 009-9A9 9 0 007 8z"></path>
          </svg>
          Contact Support
        </a>
      </div>
    </div>
  </div>
</div>

Messaggio di errore Componente - Cibo/Ristorante

Un complesso componente di messaggi di errore a tema triadico ispirato alla carta/stampa per siti Web di cibo/ristoranti, con supporto per la modalità scura e reattività completa. Presenta più elementi interattivi che simulano una stampa fisica.

Aperto Anteprima

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-gray-950 dark:to-gray-900 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-4xl w-full rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] dark:shadow-2xl dark:shadow-rose-950/50 bg-yellow-50 dark:bg-gray-800 text-gray-800 dark:text-gray-100 border border-gray-200 dark:border-gray-700 relative">
    <!-- Paper textured background with torn edges effect -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-20 dark:opacity-5
    before:absolute before:inset-x-0 before:top-0 before:h-4 before:bg-gradient-to-b before:from-yellow-50 before:to-transparent before:dark:from-gray-800 before:dark:to-transparent
    after:absolute after:inset-x-0 after:bottom-0 after:h-4 after:bg-gradient-to-t after:from-yellow-50 after:to-transparent after:dark:from-gray-800 after:dark:to-transparent
    "></div>

    <!-- Header Section - simulating a ripped-off piece of paper -->
    <div class="relative bg-red-600 dark:bg-rose-900 text-white p-4 sm:p-5 text-center shadow-md border-b border-red-700 dark:border-rose-950 overflow-hidden
                before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-4 before:h-[calc(100%+40px)] before:bg-gradient-to-r before:from-red-700 before:to-transparent before:rotate-45 before:scale-y-150
                after:content-[''] after:absolute after:-right-2 after:top-1/2 after:-translate-y-1/2 after:w-4 after:h-[calc(100%+40px)] after:bg-gradient-to-l after:from-red-700 after:to-transparent after:-rotate-45 after:scale-y-150">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight uppercase drop-shadow-md">Order Interrupted!</h1>
      <p class="text-sm sm:text-base opacity-90 mt-1">Something went wrong while preparing your delicious meal.</p>
    </div>

    <!-- Main Content Area - mimicking a crumpled note -->
    <div class="relative p-6 sm:p-8 md:p-10 z-10">
      <div class="bg-yellow-100 dark:bg-gray-700 p-6 rounded-md shadow-inner border border-yellow-200 dark:border-gray-600 relative overflow-hidden transform rotate-1 transition-transform duration-500 group-hover:rotate-0">
        <!-- Crumpled paper texture overlay -->
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/skulls.png')] opacity-5 dark:opacity-10 pointer-events-none"></div>

        <p class="text-lg sm:text-xl font-semibold mb-4 text-red-700 dark:text-red-300 flex items-center">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-12a1 1 0 10-2 0v4a1 1 0 102 0V6zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
          </svg>
          Error: Payment Processing Failed
        </p>
        <p class="mb-6 leading-relaxed">
          It seems there was a hiccup while processing your payment. Your order <span class="font-mono text-sm bg-yellow-200 dark:bg-gray-600 px-2 py-1 rounded">#FDS-202300483X</span> could not be completed.
        </p>

        <h3 class="text-xl font-bold mb-3 text-emerald-700 dark:text-emerald-400 border-b-2 border-dashed border-emerald-300 dark:border-emerald-600 pb-2 flex items-center">
          <svg class="w-6 h-6 mr-2" 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 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
          </svg>
          What you can do:
        </h3>
        <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-200 ml-2">
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Check your payment details:</strong> Please verify your card number, expiry date, and CVV. Ensure funds are available.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Try a different payment method:</strong> We accept other major credit cards, PayPal, and local payment options.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Review your internet connection:</strong> A stable connection helps prevent payment disruptions.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Clear browser cache:</strong> Sometimes old data can interfere with new transactions.</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- Stack of "sticky notes" for common actions -->
    <div class="relative p-6 sm:p-8 pt-0 flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 z-10">
      <a href="#" class="relative bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform duration-200 transform -rotate-1 hover:rotate-0 hover:scale-105 active:scale-95 origin-bottom-left text-center overflow-hidden
                  before:absolute before:inset-0 before:bg-black before:opacity-10 before:mix-blend-multiply before:transition-all before:duration-300 before:scale-y-0 before:origin-top hover:before:scale-y-100
                  border border-emerald-600 dark:border-emerald-900
                  flex items-center justify-center">
        <span class="relative z-10">Retry Payment</span>
        <svg class="w-5 h-5 ml-2 relative z-10" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.356-4H15v5m6 0h-5.356-2A8.001 8.001 0 0120 12v4m-4 0h-.582"></path>
        </svg>
      </a>

      <a href="#" class="relative bg-red-500 hover:bg-red-600 dark:bg-rose-700 dark:hover:bg-rose-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform duration-200 transform rotate-2 hover:rotate-0 hover:scale-105 active:scale-95 origin-bottom-right text-center overflow-hidden
                  before:absolute before:inset-0 before:bg-black before:opacity-10 before:mix-blend-multiply before:transition-all before:duration-300 before:scale-y-0 before:origin-top hover:before:scale-y-100
                  border border-red-600 dark:border-rose-900
                  flex items-center justify-center">
        <span class="relative z-10">Go to Homepage</span>
        <svg class="w-5 h-5 ml-2 relative z-10" 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 0h6"></path>
        </svg>
      </a>
    </div>

    <!-- Tear-off portion (bottom) with support info, like a receipt -->
    <div class="relative bg-yellow-200 dark:bg-gray-900 text-gray-700 dark:text-gray-300 p-4 sm:p-5 text-center text-sm border-t border-dashed border-yellow-300 dark:border-gray-700 overflow-hidden
                before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-4 before:h-[calc(100%+40px)] before:bg-gradient-to-r before:from-yellow-300 before:to-transparent before:-rotate-45 before:scale-y-150
                after:content-[''] after:absolute after:-right-2 after:top-1/2 after:-translate-y-1/2 after:w-4 after:h-[calc(100%+40px)] after:bg-gradient-to-l after:from-yellow-300 after:to-transparent after:rotate-45 after:scale-y-150">
      <p class="mb-2">If the problem persists, please <a href="#" class="text-red-600 dark:text-red-400 hover:underline font-semibold">contact our support team</a> with your order number.</p>
      <p class="text-xs opacity-80">Support Hotline: +1 (555) 123-4567 | Email: support@foodieoncall.com</p>
    </div>
  </div>
</div>

Componente Messaggi di Errore - Dating/Social - Dark Sepia

Un complesso componente di messaggi di errore progettato per piattaforme di appuntamenti/social, caratterizzato da una combinazione di colori seppia scuro, reattività completa e supporto della modalità oscura per ridurre l'affaticamento degli occhi.

Aperto Anteprima

                <div class="min-h-screen bg-stone-900 dark:bg-stone-950 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="relative w-full max-w-2xl bg-stone-800 dark:bg-stone-900 rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 border border-stone-700 dark:border-stone-800 transform transition-all duration-300 hover:shadow-stone-700/50 hover:-translate-y-1">
    <div class="absolute top-0 right-0 -mr-3 -mt-3 w-10 h-10 bg-red-800 rounded-full flex items-center justify-center text-white text-xl font-bold border-2 border-stone-700 dark:border-stone-800 shadow-lg">
      !
    </div>

    <div class="text-center mb-6 sm:mb-8 lg:mb-10">
      <svg class="mx-auto h-16 w-16 text-red-600 dark:text-red-700 mb-4 animate-bounce-slow" 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>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-red-500 dark:text-red-600 mb-2 sm:mb-3 leading-tight tracking-tight drop-shadow-lg">
        Connection Lost!
      </h2>
      <p class="text-base sm:text-lg text-stone-300 dark:text-stone-400 leading-relaxed">
        It seems we've encountered an unexpected hiccup. Don't worry, even Cupid has bad days.
      </p>
    </div>

    <div class="space-y-4 sm:space-y-5 mb-6 sm:mb-8 lg:mb-10">
      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-100">
        <svg class="h-6 w-6 text-yellow-400 dark:text-yellow-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Account Synchronization Error</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">Your profile could not be fully loaded. Some features might be temporarily unavailable.</p>
        </div>
      </div>

      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-200">
        <svg class="h-6 w-6 text-orange-400 dark:text-orange-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Failed to Fetch Matches</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">We're having trouble fetching new matches right now. Please try again in a few moments.</p>
        </div>
      </div>

      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-300">
        <svg class="h-6 w-6 text-rose-400 dark:text-rose-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Messaging Service Offline</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">Messages may not be sent or received at this time. We're working to restore service.</p>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <button class="w-full sm:w-auto px-6 py-3 bg-red-700 dark:bg-red-800 text-white rounded-full text-lg font-semibold shadow-lg hover:bg-red-600 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-stone-800 dark:focus:ring-offset-stone-900 transition-all duration-300 transform hover:scale-105 active:scale-95">
        <span class="flex items-center justify-center">
          <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.582m-15.356-2A8.001 8.001 0 0119.418 15m0 0H15" />
          </svg>
          Try Again
        </span>
      </button>
      <button class="w-full sm:w-auto px-6 py-3 bg-stone-700 dark:bg-stone-800 text-stone-200 rounded-full text-lg font-semibold shadow-lg hover:bg-stone-600 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-800 dark:focus:ring-offset-stone-900 transition-all duration-300 transform hover:scale-105 active:scale-95">
        <span class="flex items-center justify-center">
          <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9.247a4.75 4.75 0 014.75 4.75v1A.75.75 0 0014 15.75h1.75a.75.75 0 00.75-.75V11a4.75 4.75 0 00-4.75-4.75H9.25a.75.75 0 00-.75.75v1.75a.75.75 0 00.75.75h1A.75.75 0 0012 11h2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 009.75 9h-2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 004 7.75h-.75a.75.75 0 00-.75.75V11a4.75 4.75 0 004.75 4.75h1A.75.75 0 0012 15.75h2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 009.75 14h-2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 004 12.75h-.75a.75.75 0 00-.75.75V17a4.75 4.75 0 004.75 4.75h-1A.75.75 0 008.228 9.247z" />
          </svg>
          Support
        </span>
      </button>
    </div>

    <div class="mt-8 text-center text-sm text-stone-400 dark:text-stone-500">
      <p>Error Code: 500-SRV-2001-ALPHA. If the issue persists, our matchmakers are on it!</p>
    </div>
  </div>
</div>

<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }
  .animate-bounce-slow {
    animation: bounce-slow 3s infinite;
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .anim-fade-in {
    animation: fade-in 0.5s ease-out forwards;
    opacity: 0; /* Ensures element is hidden before animation plays */
  }
  .anim-delay-100 { animation-delay: 0.1s; }
  .anim-delay-200 { animation-delay: 0.2s; }
  .anim-delay-300 { animation-delay: 0.3s; }
</style>

Luxury_Premium_Healthcare_Error_Message

Un componente per messaggi di errore di lusso/stile premium per applicazioni sanitarie, caratterizzato da una tipografia sofisticata, una combinazione di colori ad alto contrasto e una reattività completa con supporto della modalità scura.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-slate-900 dark:to-slate-800 font-sans">
  <div class="max-w-xl w-full mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border-t-4 border-red-600 dark:border-red-700">
    <div class="p-8 sm:p-10 flex flex-col items-center text-center">
      <div class="text-red-600 dark:text-red-500 mb-6">
        <svg class="h-20 w-20 sm:h-24 sm:w-24" 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="1.5" 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"></path>
        </svg>
      </div>
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight tracking-tight">
        System Malfunction
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 leading-relaxed">
        We apologize, an unexpected error has occurred while processing your request. Our medical systems are experiencing temporary difficulties.
      </p>
      <div class="w-full">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Recommended Actions:</h3>
        <ul class="text-gray-600 dark:text-gray-400 space-y-3 mb-8 text-left max-w-sm mx-auto">
          <li class="flex items-start">
            <svg class="h-5 w-5 text-red-600 dark:text-red-500 mt-1 mr-2 flex-shrink-0" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>Please try refreshing the page or logging in again.</span>
          </li>
          <li class="flex items-start">
            <svg class="h-5 w-5 text-red-600 dark:text-red-500 mt-1 mr-2 flex-shrink-0" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>If the issue persists, contact our IT support team immediately.</span>
          </li>
          <li class="flex items-start">
            <svg class="h-5 w-5 text-red-600 dark:text-red-500 mt-1 mr-2 flex-shrink-0" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>Reference error code: <code class="font-mono text-sm bg-gray-100 dark:bg-gray-700 p-1 rounded-md text-red-700 dark:text-red-300">HC-ERR-5003</code></span>
          </li>
        </ul>
      </div>
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-semibold rounded-full shadow-lg text-white bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
        <svg class="-ml-1 mr-3 h-5 w-5" 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 10v11l6-5 6 5V10M3 10V4a2 2 0 012-2h14a2 2 0 012 2v6"></path>
        </svg>
        Contact Support
      </a>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-6 sm:p-8 border-t border-gray-200 dark:border-gray-600 text-sm text-gray-500 dark:text-gray-400 text-center">
      <p>Your patient data security is our top priority. Rest assured, our team is working diligently to resolve this immediately.</p>
    </div>
  </div>
</div>

Componente Messaggi di errore

Un componente di messaggio di errore semplice, pulito e reattivo con uno stile tipografico svizzero/internazionale e una combinazione di colori oceano/blu, adatto per la consegna di cibo a domicilio e i siti Web dei ristoranti. Include il supporto per la modalità oscura.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-sky-50 dark:bg-gray-900 p-4 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 border-t-4 border-blue-600 dark:border-blue-500 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="flex items-center space-x-4 mb-5">
      <svg class="h-10 w-10 text-blue-600 dark:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h2 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white capitalize tracking-tight">
        Oops! Order Failed
      </h2>
    </div>

    <p class="text-base md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
      We're sorry, but there was an issue processing your order. Please review the details below or try again.
    </p>

    <ul class="list-none p-0 space-y-3 mb-8">
      <li class="flex items-start text-gray-800 dark:text-gray-200">
        <svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm md:text-base">Payment authorization failed. Your bank might have declined the transaction.</span>
      </li>
      <li class="flex items-start text-gray-800 dark:text-gray-200">
        <svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm md:text-base">Item quantity exceeded restaurant stock for some items.</span>
      </li>
    </ul>

    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
      <button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out transform hover:scale-[1.02]">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 10.59V10m5.72-.94l-2.67 2.67m0 0l2.67 2.67m-2.67-2.67H7.72" />
        </svg>
        Retry Order
      </button>
      <button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 transition duration-150 ease-in-out transform hover:scale-[1.02]">
        <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-9 2v4a1 1 0 001 1h3" />
        </svg>
        Back to Home
      </button>
    </div>
  </div>
</div>

Componente di errore Ludico Autunno

Un componente di messaggi di errore giocoso e allegro progettato con colori autunnali, estetica arrotondata e supporto per la modalità scura, adatto per la documentazione o i siti wiki.

Aperto Anteprima

                <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>

Componente Messaggi di errore

Componente Messaggi di errore per social media con microinterazioni, combinazione di colori in scala di grigi, interfaccia complessa, design reattivo e supporto per temi scuri.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800 transform transition-all duration-300 hover:scale-105">
    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-gray-400 to-gray-600 rounded-t-lg animate-pulse"></div>
    
    <div class="flex items-center justify-between mb-4 border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3">
        <svg class="w-8 h-8 text-gray-600 dark:text-gray-400" 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 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"></path></svg>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">System Error</h3>
      </div>
      <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none transform transition-transform duration-200 hover:rotate-90">
        <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>

    <div class="mb-6">
      <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An unexpected error occurred. Please try again later or contact support if the issue persists.</p>
      
      <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-md text-sm text-gray-500 dark:text-gray-300 font-mono overflow-auto max-h-24">
        Error Code: 500 <br>
        Timestamp: 2023-10-27 10:30:45 <br>
        Request ID: abcd-1234-efgh-5678
      </div>
    </div>

    <div class="flex justify-end space-x-3">
      <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500 transform scale-100 hover:scale-105 transition-transform duration-200">
        Dismiss
      </button>
      <button class="px-4 py-2 text-sm font-medium text-white bg-gray-700 rounded-md hover:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-400 transform scale-100 hover:scale-105 transition-transform duration-200">
        Report Issue
      </button>
    </div>

    <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-gray-600 to-gray-400 rounded-b-lg animate-pulse-slow"></div>

  </div>
</div>

<style>
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
  }
  .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
</style>