Componente Notifiche di tipo avviso popup
Un componente Notifiche di tipo avviso popup in stile neumorfismo che utilizza Tailwind CSS con supporto per il tema scuro.
Codice 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>Componenti correlati
Componente Notifiche di tipo avviso popup
Un componente complesso di notifica di tipo avviso popup in stile glassmorphism per i dashboard, con elementi traslucidi, effetti di sfocatura e una combinazione di colori analoga. Completamente reattivo con supporto per la modalità oscura.
Componente Notifiche di tipo avviso popup
Un componente di notifica di tipo avviso popup in modalità scura progettato per le applicazioni dashboard, con una combinazione di colori complementare con vari elementi interattivi.
Componente Notifiche di tipo avviso popup
Un componente Notifiche avviso popup in stile Glassmorphism con colori pastello, progettato per blog e consumo di contenuti. Supporta la modalità oscura e presenta una ricca interfaccia con elementi interattivi.