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
Cyberpunk_Timeline_Dating_Social_Component
Un composant de chronologie réactive avec une esthétique cyberpunk pour les plateformes de rencontres et les plateformes sociales. Comprend des arrière-plans sombres, des accents néon chauds et une mise en page adaptative pour les ordinateurs de bureau, les tablettes et les mobiles, avec une prise en charge complète du mode sombre.
Composant de chronologie
Un composant de chronologie réactif avec un style de conception 3D, utilisant une palette de couleurs monochromatiques, conçu pour présenter le travail ou les produits d’un portfolio. Il comprend plusieurs éléments interactifs et prend en charge un thème sombre.
Composant de chronologie
Un composant de chronologie réactif pour les tableaux de bord, avec des micro-interactions et une palette de couleurs pastel, avec prise en charge du thème sombre. Il utilise Tailwind CSS pour le style et inclut des images de substitution de picsum.photos et des avatars de randomuser.me.