Componente Notifiche
Componente di notifiche in stile scheumorfismo con effetti reattivi e supporto per temi scuri, creato utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center p-4">
<!-- Notification 1 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Just joined the platform.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 2 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Liked your post.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 3 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Commented on your photo.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
</div>Componenti correlati
Componente Notifiche
Un componente di notifiche in stile neumorfismo con una combinazione di colori pastello, complessità moderata e design reattivo con supporto per il tema scuro. Adatto per siti web aziendali/aziendali.
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 di notifiche complesso progettato con un'estetica retrò/vintage e colori vivaci per l'e-commerce, che supporta la modalità oscura.