Componente Feed attività
Un componente del feed attività reattivo con uno stile di design neumorfico, che supporta temi chiari e scuri.
Codice HTML
<div class='flex flex-col items-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg'>
<h2 class='text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4'>Activity Feed</h2>
<div class='w-full space-y-4'>
<div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
<div class='flex items-center'>
<img src='https://randomuser.me/api/portraits/men/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
<div>
<p class='font-semibold text-gray-700 dark:text-gray-300'>John Doe</p>
<p class='text-gray-500 dark:text-gray-400'>Added a new post.</p>
</div>
</div>
</div>
<div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
<div class='flex items-center'>
<img src='https://randomuser.me/api/portraits/women/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
<div>
<p class='font-semibold text-gray-700 dark:text-gray-300'>Jane Smith</p>
<p class='text-gray-500 dark:text-gray-400'>Commented on your photo.</p>
</div>
</div>
</div>
<div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
<div class='flex items-center'>
<img src='https://randomuser.me/api/portraits/men/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
<div>
<p class='font-semibold text-gray-700 dark:text-gray-300'>Mark Johnson</p>
<p class='text-gray-500 dark:text-gray-400'>Liked your comment.</p>
</div>
</div>
</div>
<div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
<div class='flex items-center'>
<img src='https://randomuser.me/api/portraits/women/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
<div>
<p class='font-semibold text-gray-700 dark:text-gray-300'>Emily Davis</p>
<p class='text-gray-500 dark:text-gray-400'>Started following you.</p>
</div>
</div>
</div>
<div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
<div class='flex items-center'>
<img src='https://picsum.photos/200/200' alt='Random Image' class='w-10 h-10 mr-4'>
<div>
<p class='font-semibold text-gray-700 dark:text-gray-300'>Random Image</p>
<p class='text-gray-500 dark:text-gray-400'>Posted a new image.</p>
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Componente Feed attività
Un componente del feed attività in stile brutalista con design reattivo, layout ad alto contrasto e supporto per la modalità oscura utilizzando Tailwind CSS.
Componente Feed attività
Un componente del feed attività reattivo progettato per l'interfaccia utente in modalità oscura 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.