Flux d’activité monochromatique brutaliste
Un composant de flux d’activité simple, d’inspiration brutaliste, avec une palette de couleurs monochromatiques, adapté aux sites Web d’entreprise. Offre un contraste élevé, une typographie audacieuse et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<div class="font-mono min-h-screen bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
<div class="max-w-4xl mx-auto border-4 border-black dark:border-white bg-gray-200 dark:bg-gray-800 shadow-md transform -rotate-1 skew-x-1 p-0.5">
<div class="bg-gray-50 dark:bg-gray-950 p-6 sm:p-8 lg:p-10 border-4 border-black dark:border-white transform rotate-1 -skew-x-1">
<h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-black dark:text-white uppercase leading-none skew-y-2 transform -translate-x-2">
Activity <br class="sm:hidden"/>Feed
</h2>
<div class="space-y-6 sm:space-y-8 lg:space-y-10">
<!-- Activity Item 1: New Project -->
<div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
<span class="absolute -top-3 -left-3 bg-red-600 text-white text-xs px-2 py-1 uppercase font-bold transform rotate-6">NEW!</span>
<div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
<img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
<div>
<p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
<span class="text-gray-700 dark:text-gray-300">John Doe</span> created <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Project Alpha'</span>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">2 hours ago</p>
</div>
</div>
</div>
<!-- Activity Item 2: Task Update -->
<div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
<div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
<img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform rotate-2" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
<div>
<p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
<span class="text-gray-700 dark:text-gray-300">Jane Smith</span> updated <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Task #123'</span>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">4 hours ago</p>
</div>
</div>
</div>
<!-- Activity Item 3: File Upload -->
<div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
<div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
<img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-5" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
<div>
<p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
<span class="text-gray-700 dark:text-gray-300">Robert Brown</span> uploaded <span class="text-black dark:text-white underline decoration-wavy decoration-2">'report_Q3.pdf'</span>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">Yesterday</p>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-2 right-2 text-xs text-black dark:text-white font-bold transform -rotate-3">LIVE FEED</div>
</div>
</div>Composants associés
Composant Flux d’activités
Un composant de flux d’activité de style brutaliste avec un design réactif, des mises en page à contraste élevé et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de flux d’activité
Composant de flux d’activité brutaliste pour les sites Web d’entreprise/d’entreprise avec une palette de couleurs analogue, une complexité modérée, une conception réactive et une prise en charge du thème sombre.
Composant Flux d’activités
Flux d’activité Minimaliste/Design plat pour E-commerce, Monochrome, Simple, Réactif, Thème sombre