Componente Feed attività
Un componente del feed attività reattivo progettato per l'interfaccia utente in modalità oscura utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente ActivityFeed
Un semplice componente del feed di attività in stile retrò/vintage progettato per il consumo di contenuti del blog, con una combinazione di colori blu monocromatica e supporto per la modalità oscura reattiva utilizzando Tailwind CSS.
Componente Feed attività
Un componente del feed attività reattivo progettato in stile 3D con supporto per temi scuri, che incorpora elementi tridimensionali per garantire profondità e coinvolgimento.
Componente Feed attività
Componente Activity Feed con Material Design, combinazione di colori in scala di grigi, complessità moderata e supporto per la modalità scura