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 reattivo del feed attività progettato in uno stile ispirato alla carta/stampa con toni seppia/marrone, adatto per forum e piattaforme di community. Include il supporto per la modalità oscura.
Componente Feed attività
Un componente di feed di attività organico/ispirato alla natura per siti Web di eventi e conferenze, con linee fluide, toni della terra e ricchi elementi interattivi. Completamente reattivo con supporto per la modalità oscura.
Componente Feed attività
Un componente complesso e monocromatico del feed di attività in modalità scura per applicazioni sportive/fitness, che mostra varie interazioni dell'utente, risultati e aggiornamenti in modo reattivo.