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 con soporte para temas oscuros, construido con Tailwind CSS. Muestra una serie de eventos con fechas, títulos y descripciones, adecuados para un panel.
Componente de línea de tiempo
Un componente de línea de tiempo responsivo con elementos de diseño 3D, combinación de colores triádica, complejidad moderada y compatibilidad con temas oscuros, creado con Tailwind CSS para sitios web de cartera.
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.