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
Composant Notifications
Un composant de notifications rétro/vintage conçu avec des tons de terre et des interactions complexes pour montrer le travail du portfolio.
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.
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.