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
Composant Notifications
Un composant Notifications doté d’un design de glassmorphism avec une palette de couleurs monochromatiques, conçu pour les applications Web d’entreprise. Le composant comprend divers éléments interactifs et prend en charge le mode sombre.
Composant Notifications
Un composant de notifications conçu selon les principes de Material Design et une palette de couleurs monochromatiques pour les applications de commerce électronique, avec un design réactif et la prise en charge du thème sombre.