Composant Flux d’activités
Composant de flux d’activités réactif avec un style de conception neumorphique, prenant en charge les thèmes clairs et sombres.
HTML Code
<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>Composants associés
ActivityFeedComponent
Un composant simple de flux d’activité de style rétro/vintage conçu pour la consommation de contenu de blog, avec une palette de couleurs bleues monochromatiques et une prise en charge réactive du mode sombre à l’aide de Tailwind CSS.
Retro_Healthcare_Activity_Feed
Un composant de flux d’activité dynamique rétro/vintage pour les applications de santé, conçu avec une esthétique des années 80/90, avec des notifications et des mises à jour avec une prise en charge réactive et en mode sombre.
Composant Flux d’activités
Un composant de flux d’activité avec la conception Neumorphism, la palette de couleurs de terre, la mise en page complexe, la conception réactive et la prise en charge du thème sombre.