Cyberpunk_Timeline_Dating_Social_Component

<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>