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
Memphis_Gaming_Notification_Simple_Forest_Green
Un composant de notification de jeu simple et réactif avec une influence du design de Memphis utilisant une palette de couleurs vert forêt, y compris la prise en charge du mode sombre.
Composant Notifications
Un composant de notifications complexe et réactif avec prise en charge du mode sombre, conçu selon les principes de Material Design et une palette de couleurs pastel pour un site Web de blog/contenu.
Composant Notifications
Composant de notifications réactives avec prise en charge du mode sombre pour les interfaces de médias sociaux, avec une palette de couleurs vives.