Flux d’activité brutaliste
Un composant d’alimentation d’activité d’inspiration brutaliste pour les applications SaaS, avec une palette de couleurs terre, un contraste élevé et une esthétique de conception brute. Réactif avec prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Flux d’activités
Un composant de flux d’activité avec la conception Neumorphism, la palette de couleurs de terre, la mise en page complexe, la conception réactive et la prise en charge du thème sombre.
Composant de flux d’activité
Un composant de flux d’activités conçu avec une esthétique skeuomorphe, utilisant une palette de couleurs triadique adaptée aux sites Web d’entreprise. Il est réactif et prend en charge le mode sombre.
Composant de flux d’activité
Un composant de flux d’activité réactif avec un design inspiré du Bauhaus, avec un monochome noir et blanc avec un accent de couleur primaire, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.