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
Un componente de mensajes de error responsivo diseñado en un estilo brutalista con Tailwind CSS, con alto contraste, diseños inusuales y compatibilidad con el modo oscuro.
Retro_Vintage_Error_Message_Rainbow_Gradient
Un componente de mensaje de error complejo, de temática retro / vintage para plataformas educativas, con un fondo degradado de arco iris y estética de los años 80 / 90, totalmente receptivo con soporte para modo oscuro.
Luxury_Premium_Healthcare_Error_Message
Un componente de mensaje de error de lujo/estilo premium para aplicaciones de atención médica, con tipografía sofisticada, un esquema de color de alto contraste y capacidad de respuesta total con soporte para modo oscuro.