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.
Código HTML
<div class="fixed inset-x-0 bottom-4 z-50 flex items-center justify-center p-4 sm:p-6 lg:p-8">
<div class="flex w-full max-w-sm flex-col space-y-3">
<!-- Success Notification -->
<div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 p-4 shadow-lg dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
<!-- Watercolor Effect Background -->
<div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1053/600/400?blur=5'); background-size: cover; background-position: center;"></div>
<div class="relative z-10 flex items-center space-x-3">
<div class="flex-shrink-0 text-green-700 dark:text-green-300">
<svg class="h-6 w-6 sm:h-7 sm:w-7" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
Item Added to Cart!
</div>
</div>
<button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
<span class="sr-only">Close notification</span>
<svg class="h-5 w-5 sm:h-6 sm:w-6" 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>
<!-- Info Notification -->
<div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-teal-200 via-cyan-200 to-blue-200 p-4 shadow-lg dark:from-teal-800 dark:via-cyan-800 dark:to-blue-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
<!-- Watercolor Effect Background -->
<div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1060/600/400?blur=5'); background-size: cover; background-position: center;"></div>
<div class="relative z-10 flex items-center space-x-3">
<div class="flex-shrink-0 text-blue-700 dark:text-blue-300">
<svg class="h-6 w-6 sm:h-7 sm:w-7" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
Free shipping on orders over $50!
</div>
</div>
<button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
<span class="sr-only">Close notification</span>
<svg class="h-5 w-5 sm:h-6 sm:w-6" 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>
<!-- Warning Notification (Placeholder, not primary for e-commerce success/info) -->
<div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-yellow-200 via-orange-200 to-red-200 p-4 shadow-lg dark:from-yellow-800 dark:via-orange-800 dark:to-red-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
<!-- Watercolor Effect Background -->
<div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1069/600/400?blur=5'); background-size: cover; background-position: center;"></div>
<div class="relative z-10 flex items-center space-x-3">
<div class="flex-shrink-0 text-orange-700 dark:text-orange-300">
<svg class="h-6 w-6 sm:h-7 sm:w-7" 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="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"></path>
</svg>
</div>
<div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
Quantities are limited!
</div>
</div>
<button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
<span class="sr-only">Close notification</span>
<svg class="h-5 w-5 sm:h-6 sm:w-6" 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>
</div>
Componentes relacionados
Componente de notificaciones del sistema
Un componente de notificaciones del sistema receptivo con estilo Glassmorphism y combinación de colores vibrantes, adecuado para aplicaciones de comercio electrónico. Es compatible con el tema oscuro y tiene una interfaz compleja con múltiples elementos interactivos.
Notificaciones del sistema
Componente de notificaciones del sistema con estilo Glassmorphism, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS
Notificaciones del sistema
Componente de notificaciones del sistema receptivo con estilo Glassmorphism para sitios web comerciales / corporativos, compatible con tema oscuro. Combinación de colores pastel.