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
ActivityFeedComponent
Un composant simple de flux d’activité de style rétro/vintage conçu pour la consommation de contenu de blog, avec une palette de couleurs bleues monochromatiques et une prise en charge réactive 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.
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.