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.
HTML Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Activity Feed</h2>
<ul class="space-y-4">
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">John Doe</p>
<p class="text-gray-400">Commented on your post</p>
<span class="text-gray-500 text-sm">2 hours ago</span>
</div>
</li>
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">Jane Smith</p>
<p class="text-gray-400">Liked your photo</p>
<span class="text-gray-500 text-sm">4 hours ago</span>
</div>
</li>
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">Sam Wilson</p>
<p class="text-gray-400">Started following you</p>
<span class="text-gray-500 text-sm">6 hours ago</span>
</div>
</li>
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">Lisa Ray</p>
<p class="text-gray-400">Shared your article</p>
<span class="text-gray-500 text-sm">1 day ago</span>
</div>
</li>
<li class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-700 p-4 rounded-lg flex-1">
<p class="font-semibold">Michael Brown</p>
<p class="text-gray-400">Added a photo</p>
<span class="text-gray-500 text-sm">2 days ago</span>
</div>
</li>
</ul>
</div>Composants associés
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
Un composant de flux d’activités inspiré de l’agriculture organique et de la nature pour les sites Web d’événements et de conférences, avec des lignes fluides, des tons de terre et des éléments interactifs riches. Entièrement réactif avec prise en charge du mode sombre.
Composant Flux d’activités
Composant de flux d’activité avec conception matérielle, jeu de couleurs en niveaux de gris, complexité modérée et prise en charge du mode sombre