Composant Flux d’activités
Un composant de flux d’activités de style rétro/vintage pour présenter des travaux ou des produits. Le design présente une palette de couleurs analogue avec prise en charge du thème sombre. Le composant est interactif et réactif, adapté à une utilisation en portfolio.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Activity Feed</h2>
<div class="space-y-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-300">Published a new project: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Retro Aesthetic App</a>.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-300">Shared a new blog post: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Top 10 Vintage Designs</a>.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
<img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h3>
<p class="text-gray-600 dark:text-gray-300">Created a new collection: <a href="#" class="text-blue-500 dark:text-blue-300 underline">90s Nostalgia Gallery</a>.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
<img src="https://randomuser.me/api/portraits/women/34.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h3>
<p class="text-gray-600 dark:text-gray-300">Updated her portfolio: <a href="#" class="text-blue-500 dark:text-blue-300 underline">My Retro Journey</a>.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">8 hours ago</span>
</div>
</div>
</div>
</div>Composants associés
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.
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.