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.
HTML Code
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg p-4 max-w-md w-full">
<h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Activity Feed</h1>
<div class="space-y-4">
<div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Posted a new article</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">10 mins ago</p>
</div>
</div>
<div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Commented on your post</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">15 mins ago</p>
</div>
</div>
<div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Brown</p>
<p class="text-gray-600 dark:text-gray-400">Liked your photo</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">30 mins ago</p>
</div>
</div>
<div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">Emma Wilson</p>
<p class="text-gray-600 dark:text-gray-400">Started following you</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">1 hour ago</p>
</div>
</div>
</div>
<div class="mt-4">
<img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full h-32 object-cover rounded-md shadow-md" />
</div>
</div>Composants associés
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.
Composant de flux d’activité
Un composant de flux d’activité simple et réactif avec une esthétique cyberpunk-automnale, avec des arrière-plans sombres, des oranges riches, des bruns et des tons bordeaux, adapté aux applications de sport/fitness. Inclut la prise en charge du mode sombre.
Composant Flux d’activités
Composant de flux d’activité réactif pour le blog/contenu avec une conception 3D simple, une palette de couleurs pastel, la prise en charge du thème sombre et le CSS Tailwind.