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.
HTML Code
<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>Composants associés
Composant de chronologie
Un composant de chronologie complexe et réactif conçu pour les plateformes éducatives, avec un design épuré et minimaliste axé sur la typographie avec des tons de terre et une prise en charge complète du mode sombre.
Brutalist_Sepia_Timeline_Documentation
Un composant de chronologie complexe, de style brutaliste, pour la documentation ou les sites wiki, avec des tons sépia/brun et une réactivité totale avec prise en charge du mode sombre. Conçu avec un contraste élevé et une esthétique brute.
Composant de chronologie
Un composant de chronologie réactif avec un design Glassmorphism, une palette de couleurs complémentaire et une prise en charge du thème sombre, adapté aux sites Web d’entreprise. Il comporte des éléments translucides givrés ressemblant à du verre dépoli avec des effets de flou.