Componente de mensajes de alerta
Un componente de mensaje de alerta simple y monocromático para blogs con animaciones centradas en la microinteracción, compatibilidad con el modo oscuro y capacidad de respuesta.
Código HTML
<div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-4">
<div class="flex items-center px-4 py-3 animate-bounce">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm leading-5 font-medium text-gray-700 dark:text-gray-300">
New article published!
</p>
</div>
</div>
</div>Componentes relacionados
Componente de mensajes de alerta
Un componente de mensaje de alerta de estilo retro / vintage para sitios web comerciales / corporativos, con tonos tierra y diseño receptivo con soporte para modo oscuro.
Componente de mensajes de alerta
Un componente de mensaje de alerta simple al estilo de Neumorphism para sitios web comerciales, con colores vibrantes y soporte de temas oscuros receptivos que usan Tailwind CSS y sin JavaScript.
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.