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 41
Un componente de fuente de actividad responsivo con un estilo de diseño 3D, que incorpora efectos de profundidad y compatibilidad con temas oscuros, creado con Tailwind CSS.
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
Componente de alimentación de actividades con diseño de materiales, combinación de colores en escala de grises, complejidad moderada y compatibilidad con el modo oscuro