Composant Notifications
Un composant de notifications réactif avec une conception 3D, une mise en page simple en niveaux de gris et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.
HTML Code
<div class="dark:bg-gray-900 bg-gray-100 p-6 rounded-lg shadow-lg relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 opacity-20 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Notifications</h2>
<div class="space-y-4">
<div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
<img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">New message received.</p>
</div>
</div>
<div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
<img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<div>
<p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
</div>
</div>
<div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
<img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
<div>
<p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your photo.</p>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
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.
Composant Notifications
Un composant de notifications de style rétro/vintage conçu pour les tableaux de bord, avec plusieurs éléments interactifs et la prise en charge du thème sombre.