Componente de fuente de actividad
Un componente de fuente de actividad con capacidad de respuesta diseñado para la interfaz de usuario del modo oscuro mediante CSS de Tailwind.
Código HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Activity Feed</h2>
<ul class="space-y-4">
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">John Doe</p>
<p class="text-gray-400">Commented on your post</p>
<span class="text-gray-500 text-sm">2 hours ago</span>
</div>
</li>
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">Jane Smith</p>
<p class="text-gray-400">Liked your photo</p>
<span class="text-gray-500 text-sm">4 hours ago</span>
</div>
</li>
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">Sam Wilson</p>
<p class="text-gray-400">Started following you</p>
<span class="text-gray-500 text-sm">6 hours ago</span>
</div>
</li>
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">Lisa Ray</p>
<p class="text-gray-400">Shared your article</p>
<span class="text-gray-500 text-sm">1 day ago</span>
</div>
</li>
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">Michael Brown</p>
<p class="text-gray-400">Added a photo</p>
<span class="text-gray-500 text-sm">2 days ago</span>
</div>
</li>
</ul>
</div>Componentes relacionados
Componente de fuente de actividad
Un componente de alimentación de actividades receptivo con un estilo de diseño neumórfico, que admite temas claros y oscuros.
Componente de fuente de actividad
Un componente de feed de actividad complejo para el comercio electrónico con microinteracciones y un tema oscuro, diseñado con Tailwind CSS.
Componente de fuente de actividad
Un componente complejo de fuente de actividades diseñado para mostrar el contenido del blog con múltiples elementos interactivos. Incorpora un estilo de diseño 3D y una combinación de colores complementaria. Admite diseño responsivo y tema oscuro.