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.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 p-6 mt-5 shadow-lg">
<div class="flex items-center space-x-3">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/41.jpg" alt="User Avatar">
<div class="flex-1">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Error Title</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">This is a descriptive message about the error that occurred. Please take the necessary action to fix it. Thank you.</p>
</div>
</div>
<div class="mt-4 flex space-x-4">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Retry</button>
<button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">Cancel</button>
</div>
<div class="mt-4">
<img class="rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Error Illustration">
</div>
</div>Componentes relacionados
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.
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 interactivo diseñado con un estilo 3D y una combinación de colores monocromática. Adecuado para un portafolio, con elementos interactivos para la participación del usuario.