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.
Codice HTML
<div class="fixed bottom-5 right-5 z-50 space-y-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="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>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Title</h4>
<p class="text-gray-600 dark:text-gray-400">This is a brief message for a toast notification.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">5 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Notification</h4>
<p class="text-gray-600 dark:text-gray-400">Here is another message for your consideration.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">10 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Important Alert</h4>
<p class="text-gray-600 dark:text-gray-400">This is an important alert that requires your attention.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">15 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
</div>Componenti correlati
Componente Notifiche di tipo avviso popup
Un componente di notifiche Toast minimalista e vibrante che utilizza Tailwind CSS. Il componente è progettato con un layout semplice per i portfolio, supporta la modalità oscura ed è reattivo senza JavaScript.
Componente Notifiche di tipo avviso popup
Un componente Notifiche di tipo avviso popup progettato con lo stile Glassmorphism, con effetti reattivi e supporto per temi scuri. Utilizza Tailwind CSS per lo stile, insieme a immagini segnaposto da picsum.photos per le immagini e randomuser.me per gli avatar.
Notifiche di tipo avviso popup
Un componente di notifiche di tipo avviso popup reattivo e compatibile con il tema scuro per l'e-commerce con un design minimalista/piatto che utilizza una combinazione di colori complementari.