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.
HTML Code
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h2>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Just created a new project!</p>
<p class="text-gray-400 dark:text-gray-500 text-xs">2 minutes ago</p>
</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">Jane Smith</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Liked your post.</p>
<p class="text-gray-400 dark:text-gray-500 text-xs">10 minutes ago</p>
</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">Steve Brown</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Commented on your photo.</p>
<p class="text-gray-400 dark:text-gray-500 text-xs">20 minutes ago</p>
</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">Alice Johnson</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Started following you.</p>
<p class="text-gray-400 dark:text-gray-500 text-xs">30 minutes ago</p>
</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">Michael Green</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Updated his status.</p>
<p class="text-gray-400 dark:text-gray-500 text-xs">1 hour ago</p>
</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">Emily Davis</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Shared a photo.</p>
<p class="text-gray-400 dark:text-gray-500 text-xs">2 hours ago</p>
</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">Chris Black</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Joined the group.</p>
<p class="text-gray-400 dark:text-gray-500 text-xs">3 hours ago</p>
</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">Olivia White</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Sent you a message.</p>
<p class="text-gray-400 dark:text-gray-500 text-xs">4 hours ago</p>
</div>
</div>
</div>Composants associés
Composant Flux d’activités
Un composant de flux d’activité réactif conçu dans un style 3D avec prise en charge du thème sombre, incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement.
Retro_Healthcare_Activity_Feed
Un composant de flux d’activité dynamique rétro/vintage pour les applications de santé, conçu avec une esthétique des années 80/90, avec des notifications et des mises à jour avec une prise en charge réactive et en mode sombre.
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.