Componente de fuente de actividad
Un componente de feed de actividad complejo para el comercio electrónico con microinteracciones y un tema oscuro, diseñado con Tailwind CSS.
Código 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>Componentes relacionados
Componente de fuente de actividad
Un componente de fuente de actividad receptivo diseñado en un estilo 3D con soporte para temas oscuros, que incorpora elementos tridimensionales para mayor profundidad y participación.
Componente de fuente de actividad
Un componente de alimentación de actividades orgánicas/inspiradas en la naturaleza para sitios web de eventos y conferencias, con líneas fluidas, tonos tierra y elementos interactivos ricos. Totalmente receptivo con soporte para modo oscuro.
Componente de fuente de actividad
Un componente de alimentación de actividades diseñado con una estética esqueuomórfica, utilizando un esquema de color triádico adecuado para sitios web comerciales/corporativos. Es sensible y admite el modo oscuro.