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.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="p-6 rounded-xl shadow-xl bg-gray-300 dark:bg-gray-700 dark:shadow-xl-dark">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
Successfully updated!
</p>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente de mensajes de alerta
Un componente de mensajes de alerta complejo y receptivo diseñado con los principios de Material Design, utilizando tonos océano/azul, adecuado para sitios web sin fines de lucro/caridad. Incluye múltiples tipos de alertas, funcionalidad de descarte y compatibilidad con el modo oscuro.
Componente de mensajes de alerta
Un componente de mensajes de alerta responsivos en modo oscuro para mostrar notificaciones o mensajes en un portafolio, diseñado con tonos tierra y múltiples elementos interactivos.