Componente Notifiche
Componente Notifiche in stile Skeuomorphism con design reattivo e supporto per temi scuri. Questo componente presenta un aspetto realistico e in rilievo per le notifiche, incluso un sottile effetto ombra e bagliore. È completamente reattivo e include stili distinti per la modalità scura, garantendo leggibilità e appeal estetico in tutte le condizioni di illuminazione. Utilizza immagini segnaposto per gli avatar.
Codice HTML
<div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>
<!-- Notification 1 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
</div>
</div>
<!-- Notification 2 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
</div>
</div>
<!-- Notification 3 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
</div>
</div>
</div>Componenti correlati
Componente Notifiche
Un componente di notifiche reattivo con design 3D, layout in scala di grigi semplice e supporto per temi scuri, adatto per siti Web aziendali.
Componente Notifiche di lusso
Un componente di notifiche semplice ed elegante progettato per i siti Web di viaggi/turismo, caratterizzato da uno stile lussuoso/premium con toni blu aziendali e reattività completa, incluso il supporto della modalità oscura.
Componente Notifiche
Un componente di notifiche reattivo con stile Material Design, combinazione di colori complementari e supporto per la modalità oscura, costruito con Tailwind CSS per uno scopo di dashboard.