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 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.
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.