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.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-extrabold text-white mb-4">Oops! Something went wrong.</h2>
<p class="text-lg text-gray-300 mb-6">We're sorry, but it seems there was an error processing your request. Please try again later.</p>
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="text-gray-200 font-semibold">John Doe</span>
<span class="text-gray-500 italic">Your Friendly Bot</span>
</div>
</div>
<img class="w-full rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Error Illustration">
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Retry</button>
<button class="mt-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded transition duration-300 ease-in-out">Contact Support</button>
</div>Componentes relacionados
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.
Componente de mensajes de error
Un componente de mensajes de error receptivo diseñado para interfaces de redes sociales, que utiliza un modo oscuro y un esquema de color en escala de grises con Tailwind CSS.
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.