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.
Código HTML
<div class="p-4 sm:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen font-mono text-stone-800 dark:text-stone-200">
<div class="max-w-4xl mx-auto border-4 border-stone-900 dark:border-stone-100 p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 shadow-[8px_8px_0_0_#444] dark:shadow-[8px_8px_0_0_#999]">
<h2 class="text-3xl sm:text-4xl font-bold mb-6 text-stone-900 dark:text-stone-100 uppercase tracking-widest border-b-4 border-stone-900 dark:border-stone-100 pb-2">
Activity Log
</h2>
<div class="space-y-6">
<!-- Activity Item 1: New Project -->
<div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
<div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="flex items-start">
<img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
<span class="uppercase font-extrabold">Alex Johnson</span> created a new project
<a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Quantum Leap Initiative'</a>
</p>
<p class="text-sm text-stone-700 dark:text-stone-300 uppercase">2 hours ago • Project Management</p>
<div class="mt-3 p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm italic">
<p>"We're aiming to revolutionize data processing. This is a big one!"</p>
</div>
</div>
</div>
</div>
<!-- Activity Item 2: Task Update -->
<div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
<div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="flex items-start">
<img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
<span class="uppercase font-extrabold">Dr. Lena Petrova</span> updated task
<span class="text-blue-800 dark:text-blue-300 font-extrabold">'Implement Auth Module'</span> in
<a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Secure Core System'</a>
</p>
<p class="text-sm text-stone-700 dark:text-stone-300 uppercase">5 hours ago • Development</p>
<div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
<div class="p-2 border-2 border-yellow-800 dark:border-yellow-300 bg-yellow-300 dark:bg-yellow-800 text-yellow-900 dark:text-yellow-100 font-bold">
Status: <span class="underline">In Progress</span>
</div>
<div class="p-2 border-2 border-orange-800 dark:border-orange-300 bg-orange-300 dark:bg-orange-800 text-orange-900 dark:text-orange-100 font-bold">
Progress: <span class="underline">65% Complete</span>
</div>
</div>
</div>
</div>
</div>
<!-- Activity Item 3: File Upload -->
<div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
<div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="flex items-start">
<img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
<span class="uppercase font-extrabold">Carlos Rivera</span> uploaded 3 files to
<a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Marketing Assets 2023'</a>
</p>
<p class="text-sm text-stone-700 dark:text-stone-300 uppercase">1 day ago • Design</p>
<div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-2">
<img src="https://picsum.photos/id/1025/300/200" alt="Uploaded Image 1" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/id/1004/300/200" alt="Uploaded Image 2" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/id/1008/300/200" alt="Uploaded Image 3" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
</div>
</div>
</div>
</div>
<!-- Activity Item 4: Comment -->
<div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
<div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="flex items-start">
<img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
<span class="uppercase font-extrabold">Sarah Chen</span> commented on task
<span class="text-blue-800 dark:text-blue-300 font-extrabold">'Data Migration Strategy'</span> in
<a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Legacy System Upgrade'</a>
</p>
<p class="text-sm text-stone-700 dark:text-stone-300 uppercase">2 days ago • Operations</p>
<div class="mt-3 p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm italic font-semibold">
<p>"Have we considered the implications of the new GDPR policies on this migration phase? It's critical."</p>
</div>
</div>
</div>
</div>
<!-- Activity Item 5: User Joined -->
<div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
<div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="flex items-start">
<img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
<span class="uppercase font-extrabold">David Kim</span> joined the team
<span class="text-purple-800 dark:text-purple-300 font-extrabold">'Backend Engineers'</span>
</p>
<p class="text-sm text-stone-700 dark:text-stone-300 uppercase">3 days ago • HR System</p>
<div class="mt-3 flex items-center justify-between p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm ">
<span class="text-md font-bold"><span class="text-orange-900 dark:text-orange-100">Welcome, David!</span></span>
<img src="https://picsum.photos/id/1084/80/80" alt="Abstract Icon" class="w-12 h-12 border-2 border-stone-700 dark:border-stone-300 hidden sm:block">
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de fuente de actividad
Un componente de alimentación de actividad simple y receptivo con una estética otoñal cyberpunk, con fondos oscuros, naranjas intensos, marrones y tonos burdeos, adecuado para aplicaciones deportivas / fitness. Incluye soporte para modo oscuro.
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.
Componente de fuente de actividad
Un componente de fuente de actividad receptivo diseñado en un estilo 3D con soporte para temas oscuros, que incorpora elementos tridimensionales para mayor profundidad y participación.