Composant Chronologie des médias sociaux
Un composant de chronologie simple et réactif pour les médias sociaux, conçu selon les principes de Material Design. Il utilise des tons de terre et inclut la prise en charge du mode sombre. Chaque élément de la chronologie affiche un avatar utilisateur, un nom, le titre d’une publication et une image de remplacement, typique des flux de médias sociaux.
HTML Code
<div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8">
<div class="container mx-auto max-w-2xl">
<h1 class="text-4xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Social Feed Timeline</h1>
<!-- Timeline Item 1 -->
<div class="relative mb-8 last:mb-0">
<div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
<div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
<div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
</div>
<div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">John Doe posted an update</h3>
<p class="text-stone-600 dark:text-stone-400 mb-4">Exploring the beautiful trails today! #nature #hiking</p>
<img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="rounded-md w-full h-auto object-cover">
<div class="text-sm text-stone-500 dark:text-stone-500 mt-4">2 hours ago</div>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="relative mb-8 last:mb-0">
<div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
<div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
<div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
</div>
<div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Jane Smith shared a new recipe</h3>
<p class="text-stone-600 dark:text-stone-400 mb-4">Delighted with this new homemade bread recipe! So satisfying. #baking #foodie</p>
<img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="rounded-md w-full h-auto object-cover">
<div class="text-sm text-stone-500 dark:text-stone-500 mt-4">5 hours ago</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="relative mb-8 last:mb-0">
<div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
<div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
<div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
</div>
<div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Mike Johnson attended an event</h3>
<p class="text-stone-600 dark:text-stone-400 mb-4">Great time at the local tech meetup! Learned a lot. #tech #community</p>
<img src="https://picsum.photos/600/400?random=3" alt="Post Image" class="rounded-md w-full h-auto object-cover">
<div class="text-sm text-stone-500 dark:text-stone-500 mt-4">1 day ago</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de chronologie avec Glassmorphism
Composant de chronologie avec style Glassmorphism, réactif et avec prise en charge du thème sombre
Composant de chronologie
Un composant de chronologie minimaliste pour présenter le travail ou les produits d’un portfolio, avec des couleurs vives et une prise en charge du thème sombre.
Composant de chronologie
Composant de chronologie réactif avec design skeuomorphe, schéma de couleurs analogue, complexité modérée pour les sites Web de blog/contenu avec prise en charge du thème sombre. Aucun JavaScript n’est nécessaire, utilise Tailwind CSS avec prise en charge du mode sombre. Des images de picsum.photos et des avatars de randomuser.me sont utilisés.