Composant Notifications
Un composant de notifications réactives conçu avec des éléments skeuomorphes, utilisant une palette de couleurs complémentaires et une mise en page simple adaptée à un portfolio.
HTML Code
<div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Notifications</h2>
<div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Uploaded a new project.</p>
</div>
</div>
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-md">
</div>
<div class="flex items-center justify-between p-4">
<span class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</span>
<button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded-lg">View</button>
</div>
</div>
<div class="mt-4 bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Commented on your photo.</p>
</div>
</div>
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-md">
</div>
<div class="flex items-center justify-between p-4">
<span class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</span>
<button class="bg-green-500 dark:bg-green-700 text-white px-4 py-2 rounded-lg">Reply</button>
</div>
</div>
</div>Composants associés
LuxuryNotificationsComponent
Un composant de notifications simple et élégant pour les applications de médias sociaux, doté d’un style de design luxueux/haut de gamme avec des couleurs sourdes et une réactivité totale, y compris la prise en charge du mode sombre.
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.