Componente Notifiche
Un componente Notifiche caratterizzato da un design a morfismo vetroscopico con una combinazione di colori monocromatica, su misura per applicazioni web aziendali/aziendali. Il componente include vari elementi interattivi e supporta la modalità oscura.
Codice HTML
<div class="flex flex-col items-center justify-center p-8 bg-gray-900 text-white min-h-screen">
<div class="bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-2xl font-bold mb-4">Notifications</h2>
<!-- Notification Item -->
<div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<p class="font-semibold">John Doe</p>
<p class="text-sm">You have a meeting scheduled at 3 PM.</p>
<span class="text-xs text-gray-400">10 minutes ago</span>
</div>
</div>
<!-- Notification Item -->
<div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<p class="font-semibold">Jane Smith</p>
<p class="text-sm">Your invoice has been paid.</p>
<span class="text-xs text-gray-400">15 minutes ago</span>
</div>
</div>
<!-- Notification Item -->
<div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/13.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<p class="font-semibold">Mike Johnson</p>
<p class="text-sm">New comment on your post.</p>
<span class="text-xs text-gray-400">30 minutes ago</span>
</div>
</div>
<!-- Notification Item -->
<div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<p class="font-semibold">Emily Davis</p>
<p class="text-sm">Project deadline is approaching.</p>
<span class="text-xs text-gray-400">1 hour ago</span>
</div>
</div>
<div class="mt-4 text-center">
<button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
View All Notifications
</button>
</div>
</div>
</div>Componenti correlati
Componente Notifiche
Un componente di notifiche scheumorfiche per l'e-commerce con una combinazione di colori vivaci, un'interfaccia complessa, un design reattivo e il supporto per temi scuri, costruito con Tailwind CSS.
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
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.