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.
Codice HTML
<div class="relative z-10">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-5 max-w-md mx-auto">
<h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Notifications</h2>
<div class="space-y-4">
<div class="flex items-center bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-yellow-600 dark:border-yellow-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">New Order Placed!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Order #12345 has been successfully placed.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">Just now</span>
</div>
</div>
<div class="flex items-center bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-green-600 dark:border-green-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Item Shipped!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Your order #12345 is on its way!</p>
<span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
</div>
<div class="flex items-center bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-red-600 dark:border-red-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Payment Failed!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">There was an issue with your payment for order #12345.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
</div>
<div class="flex items-center bg-purple-200 dark:bg-purple-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-purple-600 dark:border-purple-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Review Reminder!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Don’t forget to review your recent purchase.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
</div>
</div>
</div>
</div>Componenti correlati
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.
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 Notifiche
Componente di notifiche in stile scheumorfismo con effetti reattivi e supporto per temi scuri, creato utilizzando Tailwind CSS.