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.
Código HTML
<div class="container mx-auto px-4 py-8 bg-gray-200 dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Activity Feed</h2>
<!-- Activity Item -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="font-bold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">posted a new article</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">The Future of Web Development</h3>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
<div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
<span>2 hours ago</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
</div>
</div>
<!-- Activity Item -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="font-bold text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">commented on a post</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Great insightful article, John! I learned a lot.</p>
<div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
<span>4 hours ago</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View post</a>
</div>
</div>
<!-- Activity Item -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="font-bold text-gray-800 dark:text-gray-200">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">liked an article</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">10 Tips for Better Productivity</h3>
<div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
<span>6 hours ago</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View article</a>
</div>
</div>
</div>Componentes relacionados
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.
Componente de fuente de actividad
Un componente de alimentación de actividad complejo y receptivo con efectos de neón/brillo y colores vibrantes, adecuado para aplicaciones de criptomonedas/blockchain, con soporte para modo oscuro.
Componente de fuente de actividad
Un componente de alimentación de actividades receptivo diseñado en un estilo inspirado en el papel/impresión con tonos sepia/marrón, adecuado para foros y plataformas comunitarias. Incluye soporte para modo oscuro.