Cyberpunk_Timeline_Dating_Social_Component
Un componente de línea de tiempo receptivo con una estética cyberpunk para plataformas sociales y de citas. Cuenta con fondos oscuros, cálidos acentos de neón y diseño adaptable para escritorio, tableta y móvil, con soporte completo para el modo oscuro.
Código HTML
<div class="font-sans antialiased bg-gray-950 text-gray-200 min-h-screen dark:bg-gray-900 border-t-4 border-indigo-600 dark:border-indigo-500">
<div class="container mx-auto px-4 py-8 lg:py-16">
<h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 tracking-wide text-indigo-400 dark:text-indigo-300 drop-shadow-lg shadow-indigo-500/50">
Your Chrono-Log
</h2>
<div class="relative before:absolute before:left-2 before:top-0 before:h-full before:w-1 before:bg-gradient-to-b before:from-indigo-600 before:via-pink-500 before:to-orange-400 before:rounded-full dark:before:from-indigo-500 dark:before:via-pink-400 dark:before:to-orange-300 lg:before:left-1/2 lg:before:-translate-x-1/2">
<!-- Timeline Item 1 -->
<div class="flex flex-col lg:flex-row lg:justify-start lg:odd:flex-row-reverse w-full mb-12">
<div class="lg:w-1/2 flex justify-end lg:pr-10 lg:text-right">
<div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-indigo-700 dark:border-indigo-600 w-full ml-8 lg:ml-0 lg:mr-0 ">
<span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-indigo-600 dark:bg-indigo-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
<div class="absolute hidden lg:block h-3 w-3 bg-indigo-600 dark:bg-indigo-500 rounded-full -right-1.5 top-8"></div>
<h3 class="text-2xl font-bold text-pink-400 dark:text-pink-300 mb-2">Connection Established</h3>
<p class="text-lg text-gray-300 dark:text-gray-400 mb-4">You matched with <span class="font-semibold text-lime-400">Ayla_Xenon</span>. Sent an initial holo-greet.</p>
<div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-10-26</span>
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
</div>
</div>
</div>
</div>
<div class="lg:w-1/2 flex items-center justify-start lg:pl-10 lg:text-left invisible lg:visible">
<img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-indigo-700 dark:border-indigo-600 object-cover" src="https://picsum.photos/400/250?random=1" alt="Match pic">
</div>
</div>
<!-- Timeline Item 2 -->
<div class="flex flex-col lg:flex-row lg:justify-start lg:even:flex-row w-full mb-12">
<div class="lg:w-1/2 flex items-center justify-end lg:pr-10 lg:text-right invisible lg:visible">
<img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-pink-700 dark:border-pink-600 object-cover" src="https://picsum.photos/400/250?random=2" alt="First Chat">
</div>
<div class="lg:w-1/2 flex justify-start lg:pl-10">
<div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-pink-700 dark:border-pink-600 w-full ml-8 lg:ml-0 lg:mr-0">
<span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-pink-600 dark:bg-pink-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
<div class="absolute hidden lg:block h-3 w-3 bg-pink-600 dark:bg-pink-500 rounded-full -left-1.5 top-8"></div>
<h3 class="text-2xl font-bold text-orange-400 dark:text-orange-300 mb-2">First Data-Exchange</h3>
<p class="text-lg text-gray-300 dark:text-gray-400 mb-4">Had a deep cyber-chat about singularity and synth-wave music.</p>
<div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-10-28</span>
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-pink-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-pink-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex flex-col lg:flex-row lg:justify-start lg:odd:flex-row-reverse w-full mb-12">
<div class="lg:w-1/2 flex justify-end lg:pr-10 lg:text-right">
<div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-orange-700 dark:border-orange-600 w-full ml-8 lg:ml-0 lg:mr-0">
<span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-orange-600 dark:bg-orange-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
<div class="absolute hidden lg:block h-3 w-3 bg-orange-600 dark:bg-orange-500 rounded-full -right-1.5 top-8"></div>
<h3 class="text-2xl font-bold text-lime-400 dark:text-lime-300 mb-2">First IRL Meet-Up</h3>
<p class="text-lg text-gray-300 dark:text-gray-400 mb-4">Met at the 'Neon Dreams' club. Had some synthetic sake.</p>
<div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-orange-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-11-03</span>
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-orange-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-orange-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
</div>
</div>
</div>
</div>
<div class="lg:w-1/2 flex items-center justify-start lg:pl-10 lg:text-left invisible lg:visible">
<img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-orange-700 dark:border-orange-600 object-cover" src="https://picsum.photos/400/250?random=3" alt="Neon Club">
</div>
</div>
<!-- Timeline Item 4 -->
<div class="flex flex-col lg:flex-row lg:justify-start lg:even:flex-row w-full mb-12">
<div class="lg:w-1/2 flex items-center justify-end lg:pr-10 lg:text-right invisible lg:visible">
<img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-lime-700 dark:border-lime-600 object-cover" src="https://picsum.photos/400/250?random=4" alt="Synth Concert">
</div>
<div class="lg:w-1/2 flex justify-start lg:pl-10">
<div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-lime-700 dark:border-lime-600 w-full ml-8 lg:ml-0 lg:mr-0">
<span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-lime-600 dark:bg-lime-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
<div class="absolute hidden lg:block h-3 w-3 bg-lime-600 dark:bg-lime-500 rounded-full -left-1.5 top-8"></div>
<h3 class="text-2xl font-bold text-indigo-400 dark:text-indigo-300 mb-2">Shared Neural-Link</h3>
<p class="text-lg text-gray-300 dark:text-gray-400 mb-4">Synchronized neural implants to experience a synth-pop concert.</p>
<div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-lime-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-11-15</span>
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
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 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.