Componente de mensajes de error
Un componente de mensajes de error de estilo glassmorphism con un tema oscuro para uso empresarial. Utiliza Tailwind CSS para diseñar con diseño responsivo y elementos interactivos.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-sm bg-opacity-30 p-6 max-w-md w-full">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Error Message</h2>
<p class="text-gray-600 dark:text-gray-300">An error has occurred while processing your request. Please try again later.</p>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/100/100" alt="Error Image" class="rounded-full border-4 border-gray-200 dark:border-gray-700" />
</div>
<div class="flex flex-col items-center mt-4">
<button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded mb-2">Retry</button>
<button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded">Cancel</button>
</div>
<div class="mt-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full" />
<span class="text-gray-700 dark:text-gray-300">Support Team</span>
</div>
</div>
</div>
</div>Componentes relacionados
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.
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.
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.