Componente de notificaciones del sistema
Un componente de notificaciones del sistema de estilo Neumorphism que utiliza CSS de Tailwind con compatibilidad con temas oscuros.
Código HTML
<div class="fixed top-5 right-5 space-y-4">
<!-- Success Toast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-semibold">Success!</p>
<p class="text-gray-600 dark:text-gray-400">Your changes have been saved successfully.</p>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Error Toast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-red-600 dark:text-red-400 font-semibold">Error!</p>
<p class="text-gray-600 dark:text-gray-400">There was an issue processing your request.</p>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Info Toast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-blue-600 dark:text-blue-400 font-semibold">Info!</p>
<p class="text-gray-600 dark:text-gray-400">This is an informational message.</p>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<style>
/* Neumorphism Styles */
.bg-white {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
-8px -8px 15px rgba(255, 255, 255, 0.9);
}
.dark .bg-gray-800 {
box-shadow: inset 8px 8px 15px rgba(0, 0, 0, 0.5),
inset -8px -8px 15px rgba(255, 255, 255, 0.1);
}
</style>Componentes relacionados
Componente de notificaciones del sistema
Un componente de notificación de tostadas simple, artístico y colorido para comercio electrónico, con texturas suaves similares a la acuarela y un degradado de arco iris. Totalmente receptivo con soporte para modo oscuro.
Componente de notificaciones de tostadas Art Deco
Un componente de notificación de tostadas simple y de alto contraste con una estética Art Deco, adecuado para sitios web de noticias y periodismo. Cuenta con diseño responsivo y soporte para modo oscuro.
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.