Composant Flux d’activités
Composant de flux d’activité avec style Glassmorphism, palette de couleurs vives, complexité modérée et prise en charge réactive du thème sombre.
HTML Code
<div class="relative antialiased px-4 dark:bg-gray-900 min-h-screen">
<div class="max-w-xl mx-auto">
<div class="relative">
<span class="absolute top-0 left-2/4 -ml-px h-full" aria-hidden="true">
<span class="w-0.5 h-full bg-gray-300 block dark:bg-gray-700"></span>
</span>
<ul class="relative">
<!-- Item -->
<li class="relative mb-6">
<div class="flex items-center">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-500 flex-shrink-0 shadow">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-4.964-1.484L3 20l1.395-3.493A8.968 8.968 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
</div>
<div class="flex-grow p-3">
<div class="flex items-center justify-between">
<a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-indigo-500 dark:text-white">Alex Shatov</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1hr ago</span>
</div>
<div class="text-gray-500 dark:text-gray-400">Preached to the choir about the importance of having a plan.</div>
</div>
</div>
</li>
<!-- Item -->
<li class="relative mb-6">
<div class="flex items-center">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-pink-500 flex-shrink-0 shadow">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6H4m6 6H4m6 0v2m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6h2m-2 0h2m0 6h2m0-6v2"></path></svg>
</div>
<div class="flex-grow p-3">
<div class="flex items-center justify-between">
<a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:text-white">Mark Cameron</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">2hr ago</span>
</div>
<div class="text-gray-500 dark:text-gray-400">Discussed the benefits of a healthy diet and exercise.</div>
</div>
</div>
</li>
<!-- Item -->
<li class="relative mb-6">
<div class="flex items-center">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-teal-500 flex-shrink-0 shadow animate-pulse">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="flex-grow p-3">
<div class="flex items-center justify-between">
<a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-teal-500 dark:text-white">Drew Berry</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">10hr ago</span>
</div>
<div class="text-gray-500 dark:text-gray-400">Is working on a new project.</div>
</div>
</div>
</li>
<!-- Item -->
<li class="relative mb-6">
<div class="flex items-center">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-fuchsia-500 flex-shrink-0 shadow">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
</div>
<div class="flex-grow p-3">
<div class="flex items-center justify-between">
<a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-fuchsia-500 dark:text-white">Danielle Price</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1 day ago</span>
</div>
<div class="text-gray-500 dark:text-gray-400">Completed the quarterly report.</div>
</div>
</div>
</li>
</ul>
</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
Un composant de flux d’activité complexe pour l’e-commerce avec des micro-interactions et un thème sombre, stylisé à l’aide de Tailwind CSS.
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.