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
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.
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.
Composant Flux d’activités
Composant de flux d’activité réactif pour le blog/contenu avec une conception 3D simple, une palette de couleurs pastel, la prise en charge du thème sombre et le CSS Tailwind.