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 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.
Composant Flux d’activités
Il s’agit d’un composant complexe de flux d’activité conçu pour présenter le contenu d’un blog avec plusieurs éléments interactifs. Intègre un style de conception 3D et une palette de couleurs complémentaires. Prend en charge le design réactif et le thème sombre.
Composant Flux d’activités
Un composant de flux d’activité réactif conçu dans un style 3D avec prise en charge du thème sombre, incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement.