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.
Código HTML
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg p-4 max-w-md w-full">
<h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Activity Feed</h1>
<div class="space-y-4">
<div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Posted a new article</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">10 mins ago</p>
</div>
</div>
<div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Commented on your post</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">15 mins ago</p>
</div>
</div>
<div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Brown</p>
<p class="text-gray-600 dark:text-gray-400">Liked your photo</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">30 mins ago</p>
</div>
</div>
<div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">Emma Wilson</p>
<p class="text-gray-600 dark:text-gray-400">Started following you</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">1 hour ago</p>
</div>
</div>
</div>
<div class="mt-4">
<img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full h-32 object-cover rounded-md shadow-md" />
</div>
</div>Componentes relacionados
Componente de fuente de actividad
Feed de actividades de diseño minimalista/plano para comercio electrónico, monocromático, simple, responsivo, tema oscuro
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
Un componente de alimentación de actividades orgánicas/inspiradas en la naturaleza para sitios web de eventos y conferencias, con líneas fluidas, tonos tierra y elementos interactivos ricos. Totalmente receptivo con soporte para modo oscuro.