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
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 de notificación del sistema de neumorfismo
Componente de notificaciones de notificación del sistema de neumorfismo con efectos responsivos y compatibilidad con temas oscuros.
Componente de notificaciones del sistema
Un componente de notificaciones del sistema con capacidad de respuesta diseñado con Glassmorphism, con una combinación de colores monocromática, compatibilidad con el modo oscuro y listo para usar en una cartera.