Composant Flux d’activités
Composant de flux d’activité avec une esthétique rétro/vintage des années 80/90, une palette de couleurs monochromatiques, une complexité modérée pour la consommation de blog/contenu. Conception réactive avec prise en charge du mode sombre à l’aide de Tailwind CSS. Images de picsum.photos et avatars de randomuser.me.
HTML Code
<div class="container mx-auto px-4 py-8 bg-gray-200 dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Activity Feed</h2>
<!-- Activity Item -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="font-bold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">posted a new article</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">The Future of Web Development</h3>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
<div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
<span>2 hours ago</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
</div>
</div>
<!-- Activity Item -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="font-bold text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">commented on a post</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Great insightful article, John! I learned a lot.</p>
<div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
<span>4 hours ago</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View post</a>
</div>
</div>
<!-- Activity Item -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="font-bold text-gray-800 dark:text-gray-200">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">liked an article</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">10 Tips for Better Productivity</h3>
<div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
<span>6 hours ago</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View article</a>
</div>
</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
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.
Flux d’activités Composante 41
Un composant de flux d’activité réactif avec un style de conception 3D, intégrant des effets de profondeur et la prise en charge des thèmes sombres, construit avec Tailwind CSS.