Componente Feed attività
Un componente complesso del feed attività per l'e-commerce con microinterazioni e un tema scuro, con uno stile CSS di Tailwind.
Codice HTML
<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>Componenti correlati
Componente Feed attività
Un componente di feed attività semplice e reattivo con un'estetica cyberpunk-autunnale, con sfondi scuri, arancioni intensi, marroni e toni bordeaux, adatto per applicazioni sportive/fitness. Include il supporto per la modalità scura.
Componente Feed attività
Un componente del feed attività in stile retrò/vintage progettato per mostrare lavori o prodotti con colori ad alta saturazione, elementi interattivi e supporto per la modalità scura.
Componente Feed attività
Un componente del feed attività in stile brutalista con design reattivo, layout ad alto contrasto e supporto per la modalità oscura utilizzando Tailwind CSS.