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 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
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.
Componente de fuente de actividad
Un componente de alimentación de actividades con diseño de neumorfismo, combinación de colores en tonos tierra, diseño complejo, diseño receptivo y compatibilidad con temas oscuros.