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.
HTML Code
<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>Related Components
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.
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.
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.