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 de flux d’activité
Un composant de flux d’activité complexe et réactif avec des effets de néon/lueur et des couleurs vives, adapté aux applications de crypto-monnaie/blockchain, avec prise en charge du mode sombre.
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.
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.