Composant Flux d’activités
Un composant de flux d’activité complexe pour l’e-commerce avec des micro-interactions et un thème sombre, stylisé à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
<div class="space-y-4">
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<div class="flex items-start space-x-4">
<img src="https://i.pravatar.cc/150?img=3" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Just purchased a new phone!</p>
<p class="text-sm text-gray-500 dark:text-gray-500">5 minutes ago</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
</div>
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<div class="flex items-start space-x-4">
<img src="https://i.pravatar.cc/150?img=5" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Left a review for "Wireless Headphones"!</p>
<p class="text-sm text-gray-500 dark:text-gray-500">10 minutes ago</p>
</div>
</div>
<img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
</div>
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<div class="flex items-start space-x-4">
<img src="https://i.pravatar.cc/150?img=7" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
<p class="text-gray-600 dark:text-gray-400">Started following you!</p>
<p class="text-sm text-gray-500 dark:text-gray-500">15 minutes ago</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Flux d’activités
Un composant de flux d’activité de style rétro/vintage conçu pour présenter des travaux ou des produits avec des couleurs à haute saturation, des éléments interactifs et la prise en charge du mode sombre.
Composant Flux d’activités
Composant de flux d’activité avec conception matérielle, jeu de couleurs en niveaux de gris, complexité modérée et prise en charge du mode sombre
Composant Flux d’activités
Un composant de flux d’activité avec la conception Neumorphism, la palette de couleurs de terre, la mise en page complexe, la conception réactive et la prise en charge du thème sombre.