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à
Componente Activity Feed con estetica Retrò/Vintage anni '80/'90, combinazione di colori monocromatici, complessità moderata per il consumo di blog/contenuti. Design reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Immagini da picsum.photos e avatar da randomuser.me.
Componente Feed attività
Un componente di feed di attività complesso e reattivo con effetti neon/bagliore e colori vivaci, adatto per applicazioni di criptovaluta/blockchain, con supporto per la modalità oscura.