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
Componente de mensajes de error
Componente de mensajes de error retro/vintage con un esquema de color pastel, diseño complejo, diseño responsivo y soporte de temas oscuros utilizando Tailwind CSS.
Componente de mensajes de error
Un componente de mensajes de error responsivo diseñado en un estilo brutalista con Tailwind CSS, con alto contraste, diseños inusuales y compatibilidad con el modo oscuro.
Componente de mensajes de error
Componente de mensajes de error con diseño 3D, combinación de colores monocromática, complejidad moderada para el propósito del tablero, diseño receptivo con soporte de tema oscuro.