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 de Marketplace
Un componente de mensajes de alerta inspirado en Material Design con colores otoñales, adecuado para plataformas de mercado. Cuenta con varios tipos de alertas (éxito, advertencia, error, información) con opciones descartables y soporte para modo oscuro.
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.
Componente de mensajes de alerta
Componente de mensajes de alerta con estilo de diseño de materiales, combinación de colores pastel y nivel de complejidad complejo, para fines de cartera. Diseño responsivo con soporte para temas oscuros. No se necesita código JavaScript, solo HTML con clases Tailwind. El modo oscuro usa el prefijo dark: de Tailwind para el estilo. Las imágenes usan picsum.photos para las imágenes y randomuser.me para los avatares.