Componente de línea de tiempo de redes sociales
Un componente de línea de tiempo simple y receptivo para redes sociales, diseñado con los principios de Material Design. Utiliza tonos tierra e incluye soporte para modo oscuro. Cada elemento de la línea de tiempo muestra un avatar de usuario, un nombre, un título de publicación y una imagen de marcador de posición, típica de los feeds de redes sociales.
Código HTML
<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>Componentes relacionados
Componente de línea de tiempo
Un componente de línea de tiempo responsivo simple diseñado en un estilo esqueuomórfico con un esquema de color en escala de grises, adecuado para sitios web comerciales / corporativos. Cuenta con un soporte de tema oscuro y utiliza Tailwind CSS para el estilo.
Neon_Glow_Timeline_Agriculture
Un componente de línea de tiempo complejo y receptivo con efectos de neón/brillo y tonos joya, diseñado para sitios web de agricultura/ganadería. Cuenta con elementos visuales enriquecidos y compatibilidad con el modo oscuro.
Componente de línea de tiempo de juegos
Un componente de línea de tiempo simple, vibrante y receptivo con un sutil diseño 3D optimizado para sitios web de juegos, con soporte para modo oscuro.