Components Error Messages Error Messages Component

Error Messages Component

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

Preview

HTML Code

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

Related Components

Minimalist Grayscale Error Message

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

Open

Error Messages Component

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

Open

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