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 de flux d’activité
Un composant de flux d’activité complexe et réactif avec des effets de néon/lueur et des couleurs vives, adapté aux applications de crypto-monnaie/blockchain, avec prise en charge du mode sombre.
Composant Flux d’activités
Il s’agit d’un composant complexe de flux d’activité conçu pour présenter le contenu d’un blog avec plusieurs éléments interactifs. Intègre un style de conception 3D et une palette de couleurs complémentaires. Prend en charge le design réactif et le thème sombre.
Composant Flux d’activités
Composant de flux d’activité réactif pour le blog/contenu avec une conception 3D simple, une palette de couleurs pastel, la prise en charge du thème sombre et le CSS Tailwind.