Componente de fuente de actividad
Un componente de alimentación de actividades receptivo con un diseño inspirado en la Bauhaus, con monocoma en blanco y negro con un acento de color primario, adecuado para aplicaciones de tecnología/SaaS. Incluye soporte para modo oscuro.
Código HTML
<div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 min-h-screen">
<div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="bg-black dark:bg-gray-950 p-4 sm:p-5 flex items-center justify-between border-b-4 border-red-500">
<h2 class="text-xl sm:text-2xl font-bold uppercase tracking-wider text-white">Activity Feed</h2>
<button class="p-2 rounded-full text-white hover:bg-white hover:text-black focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-300 ease-in-out">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
<div class="p-4 sm:p-6 space-y-6 sm:space-y-8">
<!-- Activity Item 1 -->
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 animate-pulse">
<img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="flex-grow min-w-0">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
<span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span> changed the status of <span class="font-medium text-gray-700 dark:text-gray-300">Task #1234</span>
<time datetime="2023-10-27T14:30:00Z" class="ml-2 text-xs">2 hours ago</time>
</div>
<div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
<p class="text-gray-700 dark:text-gray-300 font-bold mb-1">Status Update:</p>
<p class="text-gray-600 dark:text-gray-400">From <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">In Progress</span> to <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Completed</span></p>
</div>
</div>
</div>
<!-- Activity Item 2 -->
<div class="flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</div>
<div class="flex-grow min-w-0">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
<span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span> added 3 new files to <span class="font-medium text-gray-700 dark:text-gray-300">Project Alpha</span>
<time datetime="2023-10-27T13:00:00Z" class="ml-2 text-xs">3 hours ago</time>
</div>
<div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
<ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>design_mockup_v2.png</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>requirements.pdf</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>project_plan.xlsx</li>
</ul>
</div>
</div>
</div>
<!-- Activity Item 3 -->
<div class="flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
</div>
<div class="flex-grow min-w-0">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
<span class="font-medium text-gray-700 dark:text-gray-300">Robert Brown</span> commented on <span class="font-medium text-gray-700 dark:text-gray-300">Bug Report #567</span>
<time datetime="2023-10-27T10:15:00Z" class="ml-2 text-xs">6 hours ago</time>
</div>
<div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
<p class="text-gray-700 dark:text-gray-300">"I've replicated the bug on Firefox 118. It seems to be related to the new authentication flow. Investigating a fix now."</p>
</div>
</div>
</div>
<!-- Activity Item 4 -->
<div class="flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar">
</div>
<div class="flex-grow min-w-0">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
<span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span> invited <span class="font-medium text-gray-700 dark:text-gray-300">David Green</span> to the team
<time datetime="2023-10-27T09:00:00Z" class="ml-2 text-xs">8 hours ago</time>
</div>
<div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
<div class="flex items-center space-x-3">
<img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Invited User Avatar">
<div>
<p class="text-gray-700 dark:text-gray-300 font-medium">David Green</p>
<p class="text-gray-600 dark:text-gray-400 text-xs">[email protected]</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-4 sm:p-5 border-t border-gray-200 dark:border-gray-600 flex justify-center">
<button class="px-6 py-2 bg-red-500 text-white font-semibold rounded-md shadow-md hover:bg-black dark:hover:bg-gray-950 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out uppercase tracking-wide text-sm">
Load More
</button>
</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 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
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.