Componente Notifiche
Un componente di notifiche reattive progettato in modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-semibold mb-4">Notifications</h2>
<div class="space-y-4">
<div class="flex items-start p-3 bg-gray-700 rounded">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">John Doe</p>
<p>Just completed a new task.</p>
<span class="text-gray-400 text-sm">10 minutes ago</span>
</div>
</div>
<div class="flex items-start p-3 bg-gray-700 rounded">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">Jane Smith</p>
<p>Commented on your post.</p>
<span class="text-gray-400 text-sm">20 minutes ago</span>
</div>
</div>
<div class="flex items-start p-3 bg-gray-700 rounded">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">Michael Brown</p>
<p>Sent you a friend request.</p>
<span class="text-gray-400 text-sm">30 minutes ago</span>
</div>
</div>
<div class="flex items-start p-3 bg-gray-700 rounded">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">Emily Davis</p>
<p>Liked your photo.</p>
<span class="text-gray-400 text-sm">1 hour ago</span>
</div>
</div>
</div>
</div>
Componenti correlati
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 Notifiche reattive con supporto della modalità oscura per Dashboard
Componente Notifiche
Un componente di notifiche retrò/vintage progettato con toni della terra e interazioni complesse per mostrare il lavoro del portfolio.