Notificaciones del sistema
Componente de notificaciones del sistema con estilo Glassmorphism, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS
Código HTML
<div class="fixed bottom-0 right-0 mb-4 mr-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mx-auto" style="max-width: 300px;">
<div class="flex items-center justify-between px-4 py-2">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-200 text-sm font-semibold ml-2">User Name</p>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg class="h-4 w-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>
<div class="px-4 py-2">
<p class="text-gray-600 dark:text-gray-300 text-sm">This is a toast notification.</p>
</div>
</div>
</div>Componentes relacionados
Notificaciones de Retro Toast
Un componente de notificaciones de toast receptivo con diseño retro / vintage, combinación de colores triádica y compatibilidad con modo oscuro, construido con Tailwind CSS para uso de cartera.
Componente de notificaciones del sistema
Un componente de notificación del sistema con capacidad de respuesta con diseño skeuomórfico y compatibilidad con el modo oscuro, creado con Tailwind CSS.
Componente de notificaciones del sistema
Un componente de notificaciones de notificación del sistema al estilo de Glassmorphism con colores pastel, diseñado para blogs y consumo de contenido. Es compatible con el modo oscuro y cuenta con una interfaz rica con elementos interactivos.