Composant Notifications
Composant de notifications de style Neumorphisme avec une palette de couleurs pastel, une complexité modérée et un design réactif avec prise en charge du thème sombre. Convient aux sites Web d’entreprise/d’entreprise.
HTML Code
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
<h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Notifications</h2>
<!-- Notification Item 1 -->
<div class="flex items-center p-3 mb-3 bg-gray-200 dark:bg-gray-700 rounded-md shadow-neumorphism-inner-light dark:shadow-neumorphism-inner-dark">
<img class="w-10 h-10 rounded-full mr-3 shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div class="flex-grow">
<p class="text-sm font-medium text-gray-800 dark:text-gray-100">John Doe commented on your post.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
<button class="ml-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 focus:outline-none">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Notification Item 2 -->
<div class="flex items-center p-3 mb-3 bg-gray-200 dark:bg-gray-700 rounded-md shadow-neumorphism-inner-light dark:shadow-neumorphism-inner-dark">
<img class="w-10 h-10 rounded-full mr-3 shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<div class="flex-grow">
<p class="text-sm font-medium text-gray-800 dark:text-gray-100">Your subscription is about to expire.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
<button class="ml-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 focus:outline-none">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Add more notification items as needed -->
</div>
<style>
/* Custom Neumorphism shadows - adjust values as needed */
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-light {
box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
}
.shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.shadow-neumorphism-inner-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphism-inner-light {
box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
}
.shadow-neumorphism-inner-dark {
box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
}
.dark .shadow-neumorphism-inner-dark {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
</style>Composants associés
Memphis_Notifications_Component
Un composant de notifications simple et réactif avec une influence du design de Memphis utilisant des neutres chauds, adapté aux sites Web à but non lucratif/caritatifs. Inclut la prise en charge du mode sombre.
Composant Notifications - Musique/Audio industriels
Un composant de notifications réactif avec une esthétique industrielle et brute, des couleurs à contraste élevé et une prise en charge du mode sombre, adapté aux plateformes musicales et audio. Comprend des états non lus/lus et des éléments interactifs.
LuxuryNotificationsComponent
Un composant de notifications simple et élégant pour les applications de médias sociaux, doté d’un style de design luxueux/haut de gamme avec des couleurs sourdes et une réactivité totale, y compris la prise en charge du mode sombre.