Componente de mensajes de alerta
Este componente es un mensaje de alerta con un diseño minimalista/plano, una combinación de colores en tonos tierra y un diseño complejo. Está diseñado para interfaces de redes sociales y es responsivo con soporte para temas oscuros. Utiliza Tailwind CSS para el estilo e incluye múltiples elementos interactivos.
Código HTML
<div class="space-y-4 p-4 max-w-md mx-auto">
<!-- Success Alert -->
<div class="flex items-center p-4 bg-green-100 text-green-800 rounded-lg shadow-md dark:bg-green-700 dark:text-green-100" role="alert">
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div>
<div class="font-bold">Success! Your post has been shared.</div>
<div class="text-sm">You've reached 120 new people.</div>
</div>
<button class="ml-auto text-green-800 dark:text-green-100 hover:text-green-600 dark:hover:text-green-300 focus:outline-none">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Warning Alert -->
<div class="flex items-center p-4 bg-yellow-100 text-yellow-800 rounded-lg shadow-md dark:bg-yellow-700 dark:text-yellow-100" role="alert">
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.332 16c-.77 1.333.192 3 1.732 3z"></path></svg>
<div>
<div class="font-bold">Warning: Some images failed to upload.</div>
<div class="text-sm">Please check your network connection.</div>
</div>
<button class="ml-auto text-yellow-800 dark:text-yellow-100 hover:text-yellow-600 dark:hover:text-yellow-300 focus:outline-none">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Error Alert with Avatar -->
<div class="flex items-start p-4 bg-red-100 text-red-800 rounded-lg shadow-md dark:bg-red-700 dark:text-red-100" role="alert">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<div class="font-bold">Error: Message delivery failed.</div>
<div class="text-sm">User Componentes relacionados
Componente de mensajes de alerta
Un componente de mensaje de alerta en escala de grises simple, receptivo para sitios de comercio electrónico, con soporte para modo oscuro.
Componente de mensajes de alerta
Un componente de mensaje de alerta con un diseño retro/vintage, que incluye soporte para el modo oscuro y la capacidad de respuesta.
Componente de mensajes de alerta
Un componente de mensajes de alerta esqueuomórfico receptivo diseñado para blogs/consumo de contenido, con un esquema de color complementario y soporte para temas oscuros.