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
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.
Mensaje de alerta de glassmorphism
Componente de mensaje de alerta de Glassmorphism con un esquema de color triádico y un diseño simple, diseñado para carteras, con diseño receptivo y soporte de modo oscuro.
Alerta monocromática de comercio electrónico
Un componente de mensaje de alerta simple y receptivo para comercio electrónico, con un esquema de color monocromático y una microinteracción sutil para descartar. Soporta el modo oscuro.