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.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
<div class="space-y-4">
<!-- Activity Item -->
<div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Liked your post about web development.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</span>
</div>
</div>
<!-- Activity Item -->
<div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Commented on your picture.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">5 hours ago</span>
</div>
</div>
<!-- Activity Item -->
<div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Johnson</p>
<p class="text-gray-600 dark:text-gray-400">Started following you.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">1 day ago</span>
</div>
</div>
<!-- Activity Item -->
<div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">Emily Davis</p>
<p class="text-gray-600 dark:text-gray-400">Shared your post.</p>
<span class="text-sm text-gray-500 dark:text-gray-500">3 days ago</span>
</div>
</div>
</div>
<div class="mt-6 text-center">
<img class="rounded-lg transition-transform transform hover:scale-105" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
</div>
</div>Componenti correlati
Componente Feed attività
Un complesso componente di feed di attività ispirato al 3D per piattaforme immobiliari, caratterizzato da toni della terra, design reattivo e supporto per la modalità oscura. Visualizza varie attività relative alla proprietà.
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.