Componente de mensajes de error
Un componente de mensajes de error interactivo diseñado para el modo oscuro con un esquema de color monocromático. Está pensado para que un panel visualice errores o advertencias, con elementos interactivos como botones de descarte e iconos de error.
Código HTML
<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>Componentes relacionados
Componente de mensajes de error
Un componente de mensajes de error con estilo glassmorphism para un tablero, con un efecto de vidrio esmerilado, colores complementarios y un diseño interactivo complejo adecuado para la visualización de datos y los paneles de control.
Componente de mensajes de error - CRM/Herramientas empresariales
Un componente de mensaje de error complejo y receptivo diseñado para CRM/Business Tools, con un estilo de tipografía suizo/internacional limpio y minimalista con colores vibrantes y compatibilidad con el modo oscuro.
Mensaje de error de escala de grises minimalista
Un componente de mensaje de error en escala de grises minimalista y receptivo diseñado para aplicaciones deportivas/de fitness, con soporte para modo oscuro.