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 receptivo para paneles, con microinteracciones y una combinación de colores pastel, con soporte para temas oscuros. Utiliza Tailwind CSS para el estilo e incluye imágenes de marcador de posición de picsum.photos y avatares de randomuser.me.
Playful_Music_Timeline_Component
Un componente de línea de tiempo lúdico y divertido diseñado para plataformas de música y audio, con tonos brillantes de joyas, elementos redondeados y un diseño receptivo con soporte para modo oscuro. Muestra eventos de audio o pistas a lo largo del tiempo.
Cronología de redes sociales en escala de grises
Un componente de línea de tiempo de redes sociales responsivo y listo para el modo oscuro construido con Tailwind CSS. Cuenta con un estricto esquema de color en escala de grises y postales complejas con avatares de usuario, contenido de publicaciones (texto e imágenes), estadísticas de participación y botones de acción. Diseñado para interfaces de redes sociales con múltiples elementos interactivos en cada publicación. El diseño admite fondos oscuros para reducir la fatiga visual. No se utiliza JavaScript.