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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-xl">
<div class="md:flex">
<div class="w-full p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
<span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">3 New</span>
</div>
<!-- Notification Item 1 -->
<div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<p class="text-md font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Commented on your post "Understanding Material Design principles".</p>
</div>
</div>
<!-- Notification Item 2 -->
<div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<p class="text-md font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
<span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Liked your recent dashboard design concept.</p>
</div>
</div>
<!-- Notification Item 3 (New) -->
<div class="flex items-center p-4 border-b border-rose-300 bg-rose-50 dark:bg-rose-900 dark:border-rose-700 hover:bg-rose-100 dark:hover:bg-rose-800 transition duration-150 ease-in-out relative">
<div class="absolute top-2 right-2 px-2 py-1 text-xs font-semibold text-rose-800 bg-rose-200 rounded-full dark:bg-rose-700 dark:text-rose-100">New</div>
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<p class="text-md font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</p>
<span class="text-sm text-gray-500 dark:text-gray-400">10 hours ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Shared your data visualization dashboard template with 5 people.</p>
</div>
</div>
<!-- Notification Item 4 -->
<div class="flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/women/55.jpg" alt="User Avatar">
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<p class="text-md font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
<span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Started following your dashboard updates.</p>
</div>
</div>
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 text-center">
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200 font-semibold transition duration-150 ease-in-out">View All Notifications</a>
</div>
</div>
</div>
</div>
</div>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.
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.
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.