Composant Flux d’activités
Composant de flux d’activité avec conception matérielle, jeu de couleurs en niveaux de gris, complexité modérée et prise en charge du mode sombre
HTML Code
<div class="container mx-auto px-4 py-8 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-lg">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Posted an update</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>2 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-lg">Jane Smith</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Commented on a post</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>4 hours ago</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-lg">Peter Jones</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Liked a post</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>6 hours ago</span>
</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.
Flux d’activités Composante 41
Un composant de flux d’activité réactif avec un style de conception 3D, intégrant des effets de profondeur et la prise en charge des thèmes sombres, construit avec Tailwind CSS.
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.