Composant Notifications
Un composant de notifications neumorphiques avec un jeu de couleurs en niveaux de gris et une complexité modérée, conçu pour la consommation de blog/contenu. Il est réactif et prend en charge le thème sombre.
HTML Code
<div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-4">
<div class="w-full max-w-sm mx-auto bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Notifications</h2>
<div class="space-y-4">
<!-- Notification 1 -->
<div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1025/200/200" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
<p class="text-xs text-gray-600 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<!-- Notification 2 -->
<div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1011/200/200" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New article published: "The Future of AI".</p>
<p class="text-xs text-gray-600 dark:text-gray-400">1 day ago</p>
</div>
</div>
<!-- Notification 3 -->
<div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1005/200/200" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Your subscription is expiring soon.</p>
<p class="text-xs text-gray-600 dark:text-gray-400">3 days ago</p>
</div>
</div>
</div>
<div class="mt-6 text-center">
<a href="#" class="inline-block px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 rounded-full shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-inset-light dark:hover:shadow-neumorphic-button-inset-dark transition-all duration-300">
View All Notifications
</a>
</div>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #1f1f1f, -6px -6px 12px #3c3c3c;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #3c3c3c;
}
.shadow-neumorphic-button-light {
box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 4px 4px 8px #1f1f1f, -4px -4px 8px #3c3c3c;
}
.hover\:shadow-neumorphic-button-inset-light:hover {
box-shadow: inset 4px 4px 8px #b0b0b0, inset -4px -4px 8px #ffffff;
}
.dark .hover\:shadow-neumorphic-button-inset-dark:hover {
box-shadow: inset 4px 4px 8px #1f1f1f, inset -4px -4px 8px #3c3c3c;
}
</style>Composants associés
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.
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.
Composant Notifications
Un composant de notifications réactif avec un style Material Design, une palette de couleurs complémentaire et une prise en charge du mode sombre, conçu avec Tailwind CSS à des fins de tableau de bord.