Composant Notifications
Un composant de notifications réactives avec des micro-interactions, une palette de couleurs triadique et une prise en charge du thème sombre, conçu pour présenter des travaux ou des produits.
HTML Code
<div class="max-w-md mx-auto mt-10">
<h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Notifications</h2>
<div class="space-y-4">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
<div class="flex items-start">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-700 dark:text-gray-400">Liked your project "Sunset Scenery"</p>
<span class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
<div class="flex items-start">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-sm text-gray-700 dark:text-gray-400">Commented on your work "Abstract Art"</p>
<span class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
<div class="flex items-start">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alex Johnson</h3>
<p class="text-sm text-gray-700 dark:text-gray-400">Followed you</p>
<span class="text-xs text-gray-500 dark:text-gray-400">30 minutes ago</span>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Notifications
Un composant de notifications réactives conçu en mode sombre à l’aide de Tailwind CSS.
Composant Notifications
Composant de notifications de style Neumorphisme avec une palette de couleurs pastel, une complexité modérée et un design réactif avec prise en charge du thème sombre. Convient aux sites Web d’entreprise/d’entreprise.
Composant Notifications
Un composant de notifications complexe conçu avec une esthétique rétro/vintage et des couleurs vives pour le commerce électronique, prenant en charge le mode sombre.