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.
Codice HTML
<div class="container mx-auto p-4 md:p-8 dark:bg-gray-900">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Notifications</h2>
<!-- Notification 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
<div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your post</p>
</div>
<span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
</div>
<div class="p-4 text-gray-700 dark:text-gray-300">
<p>"This is a great article, thanks for sharing!"</p>
</div>
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
<button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</button>
<button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
</div>
</div>
<!-- Notification 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
<div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post</p>
</div>
<span class="text-gray-500 dark:text-gray-400 text-sm">5 hours ago</span>
</div>
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
<button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
</div>
</div>
<!-- Notification 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://picsum.photos/id/237/200/300" alt="Post Image">
<div class="flex-1">
<p class="text-gray-800 dark:text-white font-semibold">New Post Alert</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">A new article you might be interested in</p>
</div>
<span class="text-gray-500 dark:text-gray-400 text-sm">1 day ago</span>
</div>
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
<button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">View Post</button>
<button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
</div>
</div>
</div>Componenti correlati
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 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 minimaliste (scala di grigi)
Un componente di notifiche semplice e minimalista in scala di grigi per i portafogli, con supporto per la modalità reattiva e oscura utilizzando Tailwind CSS. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.