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.
Código HTML
<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>Componentes relacionados
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.
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.
Componente de mensaje de error
Componente de mensaje de error refinado con skeuomorfismo, combinación de colores triádica y un diseño sencillo. Diseñado con Tailwind CSS para mayor capacidad de respuesta y compatibilidad con el modo oscuro. Sin JavaScript.