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
Mensajes de error Componente 45
Un componente de mensajes de error de estilo Retro/Vintage con efectos responsivos y compatibilidad con temas oscuros, utilizando Tailwind CSS.
Componente de mensajes de error
Un componente de mensajes de error responsivo que utiliza los principios de Material Design, con un esquema de color triádico y compatibilidad con el modo oscuro, adaptado a una cartera.
Componente de mensajes de error
Un componente de mensajes de error diseñado con estilo brutalismo, utilizando un esquema de color análogo, para una interfaz de redes sociales, con un diseño receptivo y soporte para temas oscuros.