Search Components

Error Messages

Notifications of errors or problems

Error Messages Component

A simple, clean, and responsive error message component with a Swiss/International typography style and ocean/blue color scheme, suitable for food delivery and restaurant websites. Includes dark mode support.

Open Preview

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

Playful Autumn Error Component

A playful and cheerful error message component designed with autumn colors, rounded aesthetics, and dark mode support, suitable for documentation or wiki sites.

Open Preview

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

Error Messages Component

Error Messages Component for social media with microinteractions, grayscale color scheme, complex interface, responsive design, and dark theme support.

Open Preview

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

Error Messages Component

Error Messages Component for social media with dark mode support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-2xl font-bold text-white">Error</h2>
      <button class="text-gray-400 hover:text-white focus:outline-none">
        <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="text-gray-300 mb-6">
      <p>Oops! Something went wrong. Please try again later.</p>
      <ul class="mt-4 list-disc list-inside">
        <li>Check your internet connection.</li>
        <li>Ensure you have the latest version of the app.</li>
        <li>Contact support if the issue persists.</li>
      </ul>
    </div>
    <div class="flex justify-end">
      <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Got it
      </button>
    </div>
  </div>
</div>

Error Messages Component

A responsive error messages component using Material Design principles, with a triadic color scheme and dark mode support, tailored for a portfolio.

Open Preview

                <div class="flex flex-col items-center justify-center p-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <img src="https://picsum.photos/200/100" alt="Error Image" class="rounded-lg shadow-sm mb-4">
    <div class="text-center">
        <h2 class="text-lg font-bold text-red-600 dark:text-red-400">Error Occurred!</h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Oops! Something went wrong while trying to display the content.</p>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Please try again later or contact support.</p>
        <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
    </div>
</div>

Error Messages Component

A responsive error messages component designed for dark mode with a monochromatic color scheme. It is intended for a dashboard to visualize errors or warnings, featuring interactive elements such as dismiss buttons and error icons.

Open Preview

                <div class="bg-gray-800 text-gray-200 p-4 rounded-lg space-y-4">
    <h2 class="text-xl font-semibold mb-2">Error Messages</h2>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Unable to load data</p>
            <p class="text-gray-400">Details: The data could not be retrieved at this time. Please try again later.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Network issue</p>
            <p class="text-gray-400">Details: Please check your internet connection and try again.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Database connection failed</p>
            <p class="text-gray-400">Details: The application is unable to connect to the database server.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Unexpected error occurred</p>
            <p class="text-gray-400">Details: Please refresh the page or contact support.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Authentication failed</p>
            <p class="text-gray-400">Details: Invalid username or password. Please try again.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
</div>

Error Messages Component

Retro/Vintage Error Messages Component with a pastel color scheme, complex layout, responsive design, and dark theme support using Tailwind CSS.

Open Preview

                <div class="relative min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="relative bg-white dark:bg-gray-800 p-10 rounded-lg shadow-xl transform transition-all sm:w-full sm:max-w-md">
    <div class="absolute top-0 right-0 -mt-4 -mr-4">
      <svg class="h-12 w-12 text-red-500 dark:text-red-400 transform rotate-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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"/>
      </svg>
    </div>
    <div class="text-center">
      <h2 class="mt-6 text-3xl font-bold text-gray-900 dark:text-white font-display">
        Oops!
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 font-body">
        Looks like something went wrong.
      </p>
    </div>
    <div class="mt-6">
      <div class="rounded-md bg-red-50 dark:bg-red-900 p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-red-400 dark:text-red-600" viewBox="0 0 20 20" fill="currentColor">
              <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"/>
            </svg>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
              We encountered an error.
            </h3>
            <div class="mt-2 text-sm text-red-700 dark:text-red-300">
              <ul role="list" class="list-disc pl-5 space-y-1">
                <li>
                  Please try again in a few minutes.
                </li>
                <li>
                  If the issue persists, contact support.
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-6 text-center">
      <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300 font-body">
        Go back home
      </a>
    </div>
  </div>
</div>

Error Message Component

Refined error message component using Skeuomorphism, Triadic color scheme, and a simple layout. Crafted with Tailwind CSS for responsiveness and dark mode support. No JavaScript.

Open Preview

                <div class="max-w-md mx-auto p-6 bg-gradient-to-br from-red-500 via-black-500 to-blue-500 text-white font-sans rounded-lg shadow-lg dark:from-red-700 dark:via-black-700 dark:to-blue-700">
  <div class="flex items-center space-x-4">
    <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <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>
    <div class="text-lg font-bold">Error</div>
  </div>
  <div class="mt-4 text-sm">
    <p>An unexpected error occurred. Please try again later.</p>
  </div>
</div>

Error Messages Component

A responsive error messages component designed for social networking interfaces, utilizing a dark mode and grayscale color scheme with Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 text-center max-w-md w-full">
        <h2 class="text-lg font-semibold mb-2">Error Occurred</h2>
        <p class="mb-4">There was a problem processing your request. Please try again later.</p>
        <div class="flex items-center justify-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border border-gray-600 mr-3">
            <span class="text-sm">John Doe</span>
        </div>
        <img src="https://picsum.photos/200/100?random=1" alt="Error Illustration" class="rounded-lg mb-4 w-full">
        <button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Retry
        </button>
    </div>
</div>

Error Messages Component

A responsive error messages component designed with a 3D style and monochromatic color scheme. Suitable for a portfolio, featuring interactive elements for user engagement.

Open Preview

                <div class="max-w-md mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
  <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Error Messages</h2>
  <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
      <div class="text-gray-800 dark:text-gray-200">
        <span class="font-semibold">John Doe</span>
        <span class="text-gray-500 dark:text-gray-400"> - 2 hours ago</span>
      </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200">There was an error processing your request. Please try again later.</p>
  </div>
  <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
      <div class="text-gray-800 dark:text-gray-200">
        <span class="font-semibold">Jane Smith</span>
        <span class="text-gray-500 dark:text-gray-400"> - 1 hour ago</span>
      </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200">Invalid input! Please check your data and try again.</p>
  </div>
  <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow">Report Issue</button>
</div>

Search Components

Categories

Error Messages