Composant Flux d’activités
Un composant de flux d’activité de style rétro/vintage conçu pour présenter des travaux ou des produits avec des couleurs à haute saturation, des éléments interactifs et la prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-center text-violet-600 dark:text-violet-300 mb-6">Activity Feed</h2>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-violet-600 dark:border-violet-300">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-300">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Added a new project: <span class="text-violet-600 dark:text-violet-300">Awesome Website</span></p>
<p class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-600 dark:border-green-300">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Uploaded a new image.</p>
<p class="text-sm text-gray-500 dark:text-gray-500">1 day ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-600 dark:border-blue-300">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Emily Carter</p>
<p class="text-gray-600 dark:text-gray-400">Commented on your post.</p>
<p class="text-sm text-gray-500 dark:text-gray-500">3 days ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-600 dark:border-red-300">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Sarah Johnson</p>
<p class="text-gray-600 dark:text-gray-400">Started following you.</p>
<p class="text-sm text-gray-500 dark:text-gray-500">4 days ago</p>
</div>
</div>
</div>
<button class="mt-6 w-full py-2 px-4 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg shadow focus:outline-none transition duration-200 dark:bg-violet-300 dark:hover:bg-violet-200">Load More</button>
</div>Composants associés
Composant Flux d’activités
Composant de flux d’activités réactif avec un style de conception neumorphique, prenant en charge les thèmes clairs et sombres.
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.
Composant Flux d’activités
Composant de flux d’activité réactif conçu pour l’interface utilisateur en mode sombre à l’aide de Tailwind CSS.