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.
Código HTML
<div class="max-w-md mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Error Messages</h2>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-gray-800 dark:text-gray-200">
<span class="font-semibold">John Doe</span>
<span class="text-gray-500 dark:text-gray-400"> - 2 hours ago</span>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200">There was an error processing your request. Please try again later.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-gray-800 dark:text-gray-200">
<span class="font-semibold">Jane Smith</span>
<span class="text-gray-500 dark:text-gray-400"> - 1 hour ago</span>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200">Invalid input! Please check your data and try again.</p>
</div>
<button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow">Report Issue</button>
</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
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
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.