Componente de fuente de actividad
Un componente de alimentación de actividades de estilo retro/vintage diseñado para exhibir trabajos o productos con colores de alta saturación, elementos interactivos y compatibilidad con el modo oscuro.
Código HTML
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-center text-violet-600 dark:text-violet-300 mb-6">Activity Feed</h2>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-violet-600 dark:border-violet-300">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-300">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Added a new project: <span class="text-violet-600 dark:text-violet-300">Awesome Website</span></p>
<p class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-600 dark:border-green-300">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Uploaded a new image.</p>
<p class="text-sm text-gray-500 dark:text-gray-500">1 day ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-600 dark:border-blue-300">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Emily Carter</p>
<p class="text-gray-600 dark:text-gray-400">Commented on your post.</p>
<p class="text-sm text-gray-500 dark:text-gray-500">3 days ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-600 dark:border-red-300">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Sarah 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">4 days ago</p>
</div>
</div>
</div>
<button class="mt-6 w-full py-2 px-4 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg shadow focus:outline-none transition duration-200 dark:bg-violet-300 dark:hover:bg-violet-200">Load More</button>
</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.
Alimentación de actividad brutalista
Un componente de alimentación de actividades inspirado en el brutalismo para aplicaciones SaaS, con una combinación de colores en tonos tierra, alto contraste y una estética de diseño en bruto. Responsivo con soporte para modo oscuro.
Componente de fuente de actividad
Componente de alimentación de actividades con estética retro / vintage de los años 80 / 90, combinación de colores monocromática, complejidad moderada para el consumo de blog / contenido. Diseño responsivo con soporte para modo oscuro usando Tailwind CSS. Imágenes de picsum.photos y avatares de randomuser.me.