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.
Código HTML
<div class="bg-white dark:bg-gray-800 border-2 border-red-600 dark:border-red-400 rounded-lg p-6 max-w-md mx-auto mt-10 shadow-lg">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-red-600 dark:border-red-400 mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Error Avatar">
<h2 class="text-red-600 dark:text-red-400 font-bold text-xl">Error Title</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">
This is a sample error message that describes the issue encountered. It is intentionally raw and bold to reflect the brutalism design style.
</p>
<img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=1" alt="Random placeholder image">
<div class="flex justify-between items-center">
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Dismiss</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-yellow-600 dark:border-yellow-400 rounded-lg p-6 max-w-md mx-auto mt-5 shadow-lg">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-yellow-600 dark:border-yellow-400 mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Warning Avatar">
<h2 class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">Warning Title</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">
This is a warning message that might help you avoid a potential issue. It’s meant to catch your attention with a bold approach.
</p>
<img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=2" alt="Random placeholder image">
<div class="flex justify-between items-center">
<button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Acknowledge</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
</div>
</div>Componentes relacionados
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
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
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.