Search Components

Error Messages

Notifications of errors or problems

Error Messages Component - CRM/Business Tools

A complex, responsive error message component designed for CRM/Business Tools, featuring a clean, minimalist Swiss/International Typography style with vibrant colors and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center font-sans tracking-tight">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] hover:shadow-2xl">
    <div class="px-6 py-5 sm:px-8 sm:py-6 bg-red-600 dark:bg-red-700 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <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" />
        </svg>
        <h2 class="text-3xl font-extrabold text-white leading-tight">Error Occurred!</h2>
      </div>
      <button type="button" class="text-white opacity-75 hover:opacity-100 transition-opacity duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-600 focus:ring-white rounded-full p-1">
        <span class="sr-only">Close alert</span>
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <div class="p-6 sm:p-8">
      <div class="space-y-6">
        <p class="text-gray-700 dark:text-gray-300 text-lg sm:text-xl leading-relaxed">
          We're sorry, an unexpected error has prevented us from completing your request. This issue has been logged and our team is investigating.
        </p>
        
        <div class="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded-md shadow-inner">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-6 w-6 text-red-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-8V7a1 1 0 112 0v3a1 1 0 11-2 0zm0 4a1 1 0 102 0 1 1 0 00-2 0z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3 flex-1">
              <h3 class="text-lg font-bold text-red-800 dark:text-red-300">Detailed Error Information:</h3>
              <div class="mt-2 text-sm text-red-700 dark:text-red-400 leading-tight space-y-1">
                <p><strong class="font-medium">Error Code:</strong> <span class="font-mono text-gray-900 dark:text-gray-100">CRM-TRANSACTION-FATAL-001</span></p>
                <p><strong class="font-medium">Timestamp:</strong> <span class="font-mono text-gray-900 dark:text-gray-100">2023-10-27T10:30:45Z</span></p>
                <p><strong class="font-medium">Request ID:</strong> <span class="font-mono text-gray-900 dark:text-gray-100">req_aBcDeF123GHIJklMN456</span></p>
              </div>
            </div>
          </div>
        </div>

        <p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg leading-relaxed">
          Please try again in a few moments. If the problem persists, please contact our support team and provide them with the Request ID mentioned above.
        </p>

        <div class="border-t border-gray-200 dark:border-gray-700 pt-4 sm:pt-6">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Common Solutions:</h3>
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 text-base">
            <li class="flex items-start">
              <div class="text-red-500 flex-shrink-0 mr-2">•</div>
              <span>Check your internet connection and try reloading the page.</span>
            </li>
            <li class="flex items-start">
              <div class="text-red-500 flex-shrink-0 mr-2">•</div>
              <span>Clear your browser's cache and cookies.</span>
            </li>
            <li class="flex items-start">
              <div class="text-red-500 flex-shrink-0 mr-2">•</div>
              <span>Ensure you are using an up-to-date modern web browser.</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="px-6 py-4 sm:px-8 sm:py-5 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-700 flex flex-col sm:flex-row justify-end sm:items-center space-y-3 sm:space-y-0 sm:space-x-3">
      <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" /></svg>
        <span>Go Back</span>
      </a>
      <button type="button" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-bold rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9.247a1 1 0 011.004-.008L14.773 12l-5.54 2.761a1 1 0 01-1.004-.008 1 1 0 01-.424-1.109L7.5 12l-1.004-2.761a1 1 0 01.428-1.109zM15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
        <span>Contact Support</span>
      </button>
    </div>
  </div>
</div>

Memphis_Monochromatic_Error_Message

A simple, monochromatic error message component with a Memphis design influence, suitable for event/conference websites. Features bold shapes and responsive layout with dark mode support.

Open Preview

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

Minimalist Grayscale Error Message

A minimalist and responsive grayscale error message component designed for sports/fitness applications, with dark mode support.

Open Preview

                <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 p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 text-center transition-colors duration-300 ease-in-out">
    <div class="mb-6 flex justify-center text-red-500">
      <svg class="h-16 w-16 md:h-20 md:w-20 stroke-current" fill="none" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <h2 class="text-2xl md:text-3xl font-semibold mb-3 text-gray-900 dark:text-gray-50 leading-tight">
      Oops! Training Session Not Found
    </h2>
    <p class="text-base md:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
      It seems the workout you're looking for has been moved, deleted, or never existed.
      Don't let it break your sweat, try searching again or browse our fitness library.
    </p>
    <div class="flex flex-col sm:flex-row justify-center gap-3">
      <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 dark:bg-gray-100 hover:bg-gray-900 dark:hover:bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 dark:text-gray-900">
        Go to Dashboard
      </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 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
        Try Again
      </a>
    </div>
  </div>
</div>

Error Messages Component

A responsive error message component with earth tone gradients, smooth transitions, and dark mode support, suitable for consulting/services websites.

Open Preview

                <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

A simple, retro/vintage style error message component for booking/reservation systems, featuring high contrast colors and full responsiveness with dark mode support.

Open Preview

                <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

A complex, retro/vintage-themed error message component for educational platforms, featuring a rainbow gradient background and 80s/90s aesthetics, fully responsive with dark mode support.

Open Preview

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

Real Estate Error Message

A professional and clean error message component designed for real estate platforms, featuring a monochromatic color scheme, full responsiveness, and dark mode support.

Open Preview

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

Error Messages Component - Food/Restaurant

A complex, paper/print-inspired triadic themed error message component for food/restaurant websites, with dark mode support and full responsiveness. Features multiple interactive elements simulating a physical print-out.

Open Preview

                <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: [email protected]</p>
    </div>
  </div>
</div>

Error Messages Component - Dating/Social - Dark Sepia

A complex error message component designed for dating/social platforms, featuring a dark sepia color scheme, full responsiveness, and dark mode support to reduce eye strain.

Open Preview

                <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

A luxury/premium style error message component for healthcare applications, featuring sophisticated typography, a high-contrast color scheme, and full responsiveness with dark mode support.

Open Preview

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

Search Components

Categories

Error Messages