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
Código HTML
<div class="container mx-auto px-4 py-8 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-lg">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Posted an update</p>
</div>
</div>
<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-gray-500 dark:text-gray-400 text-sm">
<span>2 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-lg">Jane Smith</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Commented on a post</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>4 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-lg">Peter Jones</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Liked a post</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>6 hours ago</span>
</div>
</div>
</div>
</div>Componentes relacionados
ActivityFeedComponent
Un componente de feed de actividades simple de estilo retro / vintage diseñado para el consumo de contenido de blog, con un esquema de color azul monocromático y soporte de modo oscuro receptivo usando Tailwind CSS.
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.
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.