Componente Notifiche
Un componente Notifiche progettato con i principi del Material Design e una combinazione di colori monocromatica per applicazioni di e-commerce, con un design reattivo e il supporto del tema scuro.
Codice HTML
<div class="fixed inset-0 z-50 flex items-end justify-center p-4 space-x-4 sm:items-start">
<div class="w-full max-w-sm">
<div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<h2 class="text-white text-lg font-semibold">New Message</h2>
<p class="text-gray-300">You have a new message from a seller.</p>
</div>
<button class="text-gray-400 hover:text-gray-200">
<svg class="w-6 h-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" /></svg>
</button>
</div>
<img src="https://picsum.photos/200/100" alt="Product Image" class="rounded-md mt-2" />
<div class="mt-2">
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">5 min ago</span>
</div>
</div>
</div>
<div class="w-full max-w-sm">
<div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<h2 class="text-white text-lg font-semibold">Order Shipped</h2>
<p class="text-gray-300">Your order #12345 has been shipped.</p>
</div>
<button class="text-gray-400 hover:text-gray-200">
<svg class="w-6 h-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" /></svg>
</button>
</div>
<img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-md mt-2" />
<div class="mt-2">
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">10 min ago</span>
</div>
</div>
</div>
</div>
Componenti correlati
Componente Notifiche
Un componente di notifiche reattivo con design 3D, layout in scala di grigi semplice e supporto per temi scuri, adatto per siti Web aziendali.
Componente Notifiche
Un componente di notifiche complesso e reattivo con supporto per la modalità scura, progettato con i principi di Material Design e una combinazione di colori pastello per un blog/sito Web di contenuti.
Componente Notifiche
Componente Notifiche in stile Skeuomorphism con design reattivo e supporto per temi scuri. Questo componente presenta un aspetto realistico e in rilievo per le notifiche, incluso un sottile effetto ombra e bagliore. È completamente reattivo e include stili distinti per la modalità scura, garantendo leggibilità e appeal estetico in tutte le condizioni di illuminazione. Utilizza immagini segnaposto per gli avatar.