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 alimentación de actividades de estilo retro/vintage para mostrar trabajos o productos. El diseño presenta un esquema de color análogo con soporte para el tema oscuro. El componente es interactivo y receptivo, adecuado para el uso de cartera.
Componente de fuente de actividad
Un componente de alimentación de actividades con diseño de neumorfismo, combinación de colores en tonos tierra, diseño complejo, diseño receptivo y compatibilidad con temas oscuros.
Componente de fuente de actividad
Un componente de alimentación de actividades de estilo brutalista con diseño responsivo, diseños de alto contraste y compatibilidad con el modo oscuro mediante CSS de Tailwind.