Componente Notifiche
Un componente di notifiche in stile retrò/vintage progettato per le dashboard, con più elementi interattivi e supporto per temi scuri.
Codice HTML
<div class="bg-purple-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-white text-2xl font-bold mb-3">Notifications</h2>
<div class="space-y-4">
<div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white font-semibold">John Doe</p>
<p class="text-gray-300">You have a new message. Check it out!</p>
<span class="text-sm text-gray-500">2 minutes ago</span>
</div>
</div>
<div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white font-semibold">Jane Smith</p>
<p class="text-gray-300">Your report has been approved.</p>
<span class="text-sm text-gray-500">15 minutes ago</span>
</div>
</div>
<div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white font-semibold">Chris Johnson</p>
<p class="text-gray-300">New comment on your post.</p>
<span class="text-sm text-gray-500">30 minutes ago</span>
</div>
</div>
<div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white font-semibold">Anna Taylor</p>
<p class="text-gray-300">Don't forget to review your tasks.</p>
<span class="text-sm text-gray-500">1 hour ago</span>
</div>
</div>
</div>
<a href="#" class="block text-center text-white bg-blue-600 hover:bg-blue-700 rounded-lg mt-5 p-2 transition duration-300">View All Notifications</a>
</div>Componenti correlati
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.
Componente Notifiche
Un componente di notifiche semplice e reattivo con supporto per la modalità oscura, progettato in uno stile Skeuomorphic con una combinazione di colori in scala di grigi. Ideale per un portfolio per mostrare competenze di progettazione minime.
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.