Search Components

Error Messages

Notifications of errors or problems

Error Messages Component

A glassmorphism styled error messages component for a dashboard, featuring a frosted glass effect, complementary colors, and a complex interactive design suitable for data visualization and control panels.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-6 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg w-full max-w-md">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Error Messages</h2>
        <div class="bg-red-500 text-white p-4 rounded-lg mb-4 flex items-center">
            <div class="flex-shrink-0">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </div>
            <div class="ml-3">
                <p class="font-semibold">Network Error:</p>
                <p>There was a problem connecting to the server. Please try again later.</p>
            </div>
        </div>
        <div class="bg-yellow-500 text-white p-4 rounded-lg mb-4 flex items-center">
            <div class="flex-shrink-0">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            </div>
            <div class="ml-3">
                <p class="font-semibold">Warning:</p>
                <p>Your session will expire in 5 minutes.</p>
            </div>
        </div>
        <div class="bg-green-500 text-white p-4 rounded-lg flex items-center">
            <div class="flex-shrink-0">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            </div>
            <div class="ml-3">
                <p class="font-semibold">Success:</p>
                <p>Your changes have been saved successfully!</p>
            </div>
        </div>
    </div>
</div>

Error Messages Component

A glassmorphism style error messages component with a dark theme for business use. It utilizes Tailwind CSS for styling with responsive design and interactive elements.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-sm bg-opacity-30 p-6 max-w-md w-full">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Error Message</h2>
        <p class="text-gray-600 dark:text-gray-300">An error has occurred while processing your request. Please try again later.</p>
        <div class="flex justify-center mt-4">
            <img src="https://picsum.photos/100/100" alt="Error Image" class="rounded-full border-4 border-gray-200 dark:border-gray-700" />
        </div>
        <div class="flex flex-col items-center mt-4">
            <button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded mb-2">Retry</button>
            <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded">Cancel</button>
        </div>
        <div class="mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full" />
                <span class="text-gray-700 dark:text-gray-300">Support Team</span>
            </div>
        </div>
    </div>
</div>

Error Messages Component

An Error Messages Component designed with Brutalism style, using an Analogous color scheme, for a social media interface, featuring a responsive design and dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-extrabold text-white mb-4">Oops! Something went wrong.</h2>
    <p class="text-lg text-gray-300 mb-6">We're sorry, but it seems there was an error processing your request. Please try again later.</p>
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="text-gray-200 font-semibold">John Doe</span>
            <span class="text-gray-500 italic">Your Friendly Bot</span>
        </div>
    </div>
    <img class="w-full rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Error Illustration">
    <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Retry</button>
    <button class="mt-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded transition duration-300 ease-in-out">Contact Support</button>
</div>

Error Messages Component

Skeuomorphism triadic color scheme complex E-commerce error messages component with responsive design and dark mode support.

Open Preview

                 <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
      <div class="max-w-sm mx-auto bg-white dark:bg-gray-700 shadow-2xl rounded-lg overflow-hidden">
        <div class="p-6">
          <div class="text-center">
            <svg
              class="mx-auto h-16 w-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>
            <h3
              class="mt-2 text-2xl leading-6 font-medium text-gray-900 dark:text-gray-100"
            >
              Order Processing Failed
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500 dark:text-gray-300">
                We encountered an issue while processing your order. Please try
                again later or contact support.
              </p>
            </div>
          </div>
          <div class="mt-5 sm:mt-6">
            <button
              type="button"
              class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 dark:bg-blue-500 text-base font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 sm:text-sm"
            >
              Contact Support
            </button>
          </div>
        </div>
        <div class="border-t border-gray-200 dark:border-gray-600 px-6 py-4">
          <div class="text-center">
            <button
              type="button"
              class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
            >
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>

Error Messages Component

Error Messages Component with 3D Design, Monochromatic color scheme, Moderate complexity for Dashboard purpose, responsive design with dark theme support.

Open Preview

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative">
    <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-purple-600 transform -skew-y-3 rotate-1 scross-y-3 rounded-3xl dark:from-purple-700 dark:to-purple-900"></div>
    <div class="relative bg-white p-10 rounded-xl shadow-2xl text-center dark:bg-gray-800">
      <h1 class="text-3xl font-bold text-red-500 dark:text-red-400">Error!</h1>
      <p class="mt-4 text-gray-700 dark:text-gray-300">Something went wrong. Please try again later.</p>
      <button class="mt-6 px-8 py-2 bg-purple-500 text-white rounded-full hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-700">Retry</button>
    </div>
  </div>
</div>

Error Messages Component

A responsive error messages component designed in a brutalism style using Tailwind CSS, featuring high contrast, unusual layouts, and dark mode support.

Open Preview

                <div class="bg-white dark:bg-gray-800 border-2 border-red-600 dark:border-red-400 rounded-lg p-6 max-w-md mx-auto mt-10 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-red-600 dark:border-red-400 mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Error Avatar">
        <h2 class="text-red-600 dark:text-red-400 font-bold text-xl">Error Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a sample error message that describes the issue encountered. It is intentionally raw and bold to reflect the brutalism design style.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=1" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Dismiss</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-yellow-600 dark:border-yellow-400 rounded-lg p-6 max-w-md mx-auto mt-5 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-yellow-600 dark:border-yellow-400 mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Warning Avatar">
        <h2 class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">Warning Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a warning message that might help you avoid a potential issue. It’s meant to catch your attention with a bold approach.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=2" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Acknowledge</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>

Error Messages Component

This component displays error messages with engaging animations that respond to user actions. It includes support for dark mode and features responsive effects using Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="max-w-md w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 transition duration-300 hover:shadow-xl transform hover:-translate-y-1">
    <div class="flex items-center mb-4">
      <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Error Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">
      This is an error message that explains what went wrong. Please check your input and try again.
    </p>
    <div class="flex items-center justify-between mt-4">
      <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
      <button class="px-4 py-2 bg-red-500 text-white font-semibold rounded-md hover:bg-red-600 transition duration-200 dark:bg-red-700 dark:hover:bg-red-800">Cancel</button>
    </div>
    <img class="mt-4 w-full h-32 object-cover rounded" src="https://picsum.photos/400/200?random=1" alt="Error Illustration">
  </div>
</div>

Error Messages Component

An error message component with a skeuomorphic design, featuring a realistic alert icon and shadowed border. It supports responsive layouts and includes distinct styles for dark mode, ensuring readability and a visually appropriate appearance in different themes.

Open Preview

                <div class="rounded-lg shadow-lg bg-gradient-to-br from-red-500 to-red-700 p-6 max-w-sm mx-auto mt-10 relative overflow-hidden dark:from-gray-700 dark:to-gray-900">
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);"></div>
    <div class="flex items-center space-x-4">
        <div class="flex-shrink-0">
            <!-- Skeuomorphic Error Icon -->
            <svg class="h-8 w-8 text-white filter drop-shadow-md dark:text-red-400" 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.306 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
        </div>
        <div>
            <h3 class="text-lg leading-6 font-medium text-white drop-shadow dark:text-red-50">
                Error Occurred
            </h3>
            <p class="mt-2 text-sm text-red-100 dark:text-red-200">
                An unexpected error has occurred. Please try again later.
            </p>
        </div>
    </div>
</div>

Error Messages Component

A responsive error messages component featuring engaging animations for user interactions and supporting dark theme using Tailwind CSS.

Open Preview

                <div class="max-w-lg mx-auto p-4">
    <!-- Error Message Card -->
    <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <!-- Error Icon -->
        <div class="flex items-center mb-2">
            <img src="https://picsum.photos/40/40?random=1" alt="Error Icon" class="w-10 h-10 mr-2 rounded-full" />
            <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Error Title</h2>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a descriptive error message that provides more detail about the issue.</p>
        <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
            Close
        </button>
    </div>
    
    <!-- Example of Multiple Error Messages -->
    <div class="mt-4 space-y-4">
        <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
                <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">User Not Found</h2>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">The user you are looking for might have been removed.</p>
            <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
                Retry
            </button>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
                <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Network Error</h2>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">There seems to be a network issue, please check your connection.</p>
            <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
                Reload
            </button>
        </div>
    </div>
</div>

Error Messages Component 45

A Retro/Vintage styled error messages component featuring responsive effects and dark theme support, using Tailwind CSS.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 p-6 mt-5 shadow-lg">
    <div class="flex items-center space-x-3">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/41.jpg" alt="User Avatar">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Error Title</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">This is a descriptive message about the error that occurred. Please take the necessary action to fix it. Thank you.</p>
        </div>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Retry</button>
        <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">Cancel</button>
    </div>
    <div class="mt-4">
        <img class="rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Error Illustration">
    </div>
</div>

Search Components

Categories

Error Messages