Composant Notifications
Composant de notifications réactives avec prise en charge du mode sombre pour le tableau de bord
HTML Code
<div class="relative">
<!-- Notifications Button -->
<button class="relative flex items-center justify-center w-10 h-10 bg-blue-500 text-white rounded-full shadow-lg focus:outline-none dark:bg-blue-700">
<svg class="w-6 h-6" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path>
</svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full dark:bg-red-800">3</span>
</button>
<!-- Notifications Dropdown (Hidden by Default) -->
<div class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl overflow-hidden z-10 dark:bg-gray-800 dark:text-gray-200">
<div class="py-2">
<!-- Notification Item 1 -->
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
<img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<p class="text-sm">
<span class="font-bold">John Doe</span> added a new report.
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
</p>
</a>
<!-- Notification Item 2 -->
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
<img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<p class="text-sm">
<span class="font-bold">Jane Smith</span> commented on your task.
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
</p>
</a>
<!-- Notification Item 3 -->
<a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
<img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
<p class="text-sm">
<span class="font-bold">David Green</span> completed a project.
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
</p>
</a>
</div>
<!-- View All Button -->
<a href="#" class="block bg-gray-50 text-center font-bold py-3 text-blue-500 hover:underline dark:bg-gray-700 dark:text-blue-400">
View All Notifications
</a>
</div>
</div>Composants associés
Composant Notifications
Un composant de notifications complexe et réactif stylisé avec des éléments inspirés du Bauhaus utilisant des neutres chauds, adapté à la documentation ou aux sites wiki, avec prise en charge du 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.
SkeuomorphicNotificationsComponent
Un composant de notifications simple et réactif inspiré du Skeuomorphism, avec une palette de couleurs analogue adaptée aux sites Web d’entreprise. Il inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style. Les images proviennent de picsum.photos et les avatars de randomuser.me.