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 de notifications skeuomorphique pour le commerce électronique avec une palette de couleurs vives, une interface complexe, un design réactif et une prise en charge du thème sombre, construit avec Tailwind CSS.
Notifications Composante 26
Un composant de notifications minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre, affichant une liste de notifications avec des avatars et des images.
Composant Notifications
Un composant de notifications simple et réactif avec prise en charge du mode sombre, conçu dans un style Skeuomorphic avec une palette de couleurs en niveaux de gris. Idéal pour un portfolio mettant en valeur des compétences minimales en matière de design.