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 complesso progettato con un'estetica retrò/vintage e colori vivaci per l'e-commerce, che supporta la modalità oscura.
Notifiche Componente 26
Un componente di notifiche minimalista progettato con Tailwind CSS, con effetti reattivi e supporto per temi scuri, che visualizza un elenco di notifiche con avatar e immagini.
Componente SkeuomorphicNotificationsComponent
Un componente di notifiche semplice e reattivo ispirato allo scheumorfismo, caratterizzato da una combinazione di colori analoga adatta per siti Web aziendali/aziendali. Include il supporto per il tema scuro e utilizza Tailwind CSS per lo stile. Le immagini provengono da picsum.photos e gli avatar da randomuser.me.