Componente de mensajes de alerta
Un componente de mensajes de alerta de estilo brutalista con una combinación de colores pastel, diseñado para sitios web comerciales/corporativos y responsivo con soporte para temas oscuros.
Código HTML
<div class="flex flex-col space-y-4 p-6 bg-white text-black dark:bg-gray-800 dark:text-white">
<!-- Alert Message Header -->
<h2 class="text-2xl font-bold">Alert Messages</h2>
<!-- Alert Message Item -->
<div class="flex items-center p-4 bg-pink-100 border-l-4 border-pink-500 dark:bg-pink-800 dark:border-pink-400">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold">John Doe</span>
<p>This is an informational alert message to notify you about updates.</p>
</div>
</div>
<!-- Alert Message Item -->
<div class="flex items-center p-4 bg-yellow-100 border-l-4 border-yellow-500 dark:bg-yellow-800 dark:border-yellow-400">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold">Jane Smith</span>
<p>This is a warning alert message to notify you about potential issues.</p>
</div>
</div>
<!-- Alert Message Item -->
<div class="flex items-center p-4 bg-green-100 border-l-4 border-green-500 dark:bg-green-800 dark:border-green-400">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold">Alex Johnson</span>
<p>This is a success alert message to confirm your action.</p>
</div>
</div>
</div>Componentes relacionados
Corporate_Professional_Alert_Messages
Una colección de mensajes de alerta limpios e inspirados en la confiabilidad, adecuados para entornos comerciales o de cartera, con colores en tono joya y un diseño receptivo con soporte para modo oscuro. Incluye alertas informativas, de éxito, de advertencia y de error.
Alerta de Bosque Lúdico
Un componente de mensajes de alerta lúdico y alegre diseñado con una paleta de colores bosque/verde, elementos redondeados y una estética amigable, adecuado para sitios web comerciales/corporativos. Es responsivo e incluye soporte para el modo oscuro.
Componente de mensajes de alerta
Un componente de mensajes de alerta minimalista y vibrante para sitios web comerciales/corporativos, con diseño receptivo y soporte para modo oscuro. Incluye diferentes tipos de alertas como éxito, error, información y advertencia.