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.
HTML Code
<div class="p-4 bg-gray-900 dark:bg-black text-white rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4 text-teal-400">Notifications</h2>
<div class="space-y-4">
<div class="flex items-center border-b border-gray-700 pb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="flex-grow"><span class="font-semibold text-purple-400">John Doe</span> liked your post.</p>
<span class="text-gray-500 text-sm">2 min ago</span>
</div>
<div class="flex items-center border-b border-gray-700 pb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="flex-grow"><span class="font-semibold text-pink-400">Jane Smith</span> commented on your photo.</p>
<span class="text-gray-500 text-sm">1 hour ago</span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="flex-grow"><span class="font-semibold text-yellow-400">Peter Jones</span> started following you.</p>
<span class="text-gray-500 text-sm">3 hours ago</span>
</div>
</div>
</div>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
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.
Composant Notifications
Un composant de notifications complexe et réactif conçu avec les principes de Material Design, des couleurs neutres froides et la prise en charge du mode sombre, adapté à un portfolio pour présenter des éléments interactifs et des effets de profondeur.