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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform duration-300 hover:scale-105">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Notifications</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">3 New</span>
</div>
<div class="p-4 space-y-4">
<!-- Notification Item 1 -->
<div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
<img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar">
<div class="flex-1">
<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-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<!-- Notification Item 2 -->
<div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
<img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith liked your photo.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<!-- Notification Item 3 -->
<div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
<img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">You have a new message from Bob Johnson.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
</div>
<div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right">
<a href="#" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transform duration-200 hover:underline">View All Notifications</a>
</div>
</div>
</div>
Composants associés
Composant Notifications
Un composant de notifications complexe conçu avec une esthétique rétro/vintage et des couleurs vives pour le commerce électronique, prenant en charge le mode sombre.
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.
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.