Notifications Composante 26
Un composant de notifications minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre, affichant une liste de notifications avec des avatars et des images.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
<h2 class="text-xl font-semibold mb-4">Notifications</h2>
<div class="space-y-3">
<!-- Notification Item -->
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe liked your post</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Just now</p>
</div>
<img src="https://picsum.photos/40/40" alt="Image" class="w-10 h-10 rounded-lg ml-2">
</div>
<!-- Notification Item -->
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith commented on your photo</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">5 minutes ago</p>
</div>
<img src="https://picsum.photos/40/41" alt="Image" class="w-10 h-10 rounded-lg ml-2">
</div>
<!-- Notification Item -->
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Mark Wilson started following you</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">10 minutes ago</p>
</div>
<img src="https://picsum.photos/40/42" alt="Image" class="w-10 h-10 rounded-lg ml-2">
</div>
</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 - 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 skeuomorphisme avec conception réactive et prise en charge du thème sombre. Ce composant présente un aspect réaliste et en relief pour les notifications, y compris un effet d’ombre et de lueur subtil. Il est entièrement réactif et comprend des styles distincts pour le mode sombre, assurant une lisibilité et un attrait esthétique dans toutes les conditions d’éclairage. Utilise des images d’espace réservé pour les avatars.