Composant Flux d’activités
Flux d’activité Minimaliste/Design plat pour E-commerce, Monochrome, Simple, Réactif, Thème sombre
HTML Code
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h3>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-3 flex items-center justify-between">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<p class="text-sm text-gray-600 dark:text-gray-300">
<span class="font-medium text-gray-900 dark:text-white">John Doe</span> placed an order.
</p>
</div>
<span class="text-xs text-gray-400 dark:text-gray-500">2 hours ago</span>
</li>
<li class="py-3 flex items-center justify-between">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<p class="text-sm text-gray-600 dark:text-gray-300">
<span class="font-medium text-gray-900 dark:text-white">Jane Smith</span> reviewed a product.
</p>
</div>
<span class="text-xs text-gray-400 dark:text-gray-500">5 hours ago</span>
</li>
<li class="py-3 flex items-center justify-between">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
<p class="text-sm text-gray-600 dark:text-gray-300">
<span class="font-medium text-gray-900 dark:text-white">Robert Brown</span> added item to cart.
</p>
</div>
<span class="text-xs text-gray-400 dark:text-gray-500">10 hours ago</span>
</li>
</ul>
</div>Composants associés
Composant Flux d’activités
Un composant de flux d’activités inspiré de l’agriculture organique et de la nature pour les sites Web d’événements et de conférences, avec des lignes fluides, des tons de terre et des éléments interactifs riches. Entièrement réactif avec prise en charge du mode sombre.
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.
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.