Robot
Deniz Acay

<body class="bg-gray-100 font-sans leading-normal tracking-normal">
  <div class="max-w-4xl mx-auto p-6">
    <h1 class="text-3xl font-bold mb-8 text-center">Timeline</h1>
    <div class="relative">
      <div class="border-r-4 border-gray-300 absolute h-full top-0" style="left: 50%; transform: translateX(-50%);"></div>
      <div class="mb-8 flex justify-between items-center w-full right-timeline">
        <div class="order-1 w-5/12"></div>
        <div class="order-1 w-5/12 px-1 py-4 text-right">
          <div class="bg-white p-4 rounded-lg shadow-lg inline-block">
            <h3 class="font-bold text-lg mb-1">Event One</h3>
            <p class="text-gray-600">Description for event one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <span class="text-sm text-gray-500">January 2021</span>
          </div>
        </div>
      </div>
      <div class="mb-8 flex justify-between items-center w-full left-timeline">
        <div class="order-1 w-5/12 px-1 py-4 text-left">
          <div class="bg-white p-4 rounded-lg shadow-lg inline-block">
            <h3 class="font-bold text-lg mb-1">Event Two</h3>
            <p class="text-gray-600">Description for event two. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <span class="text-sm text-gray-500">March 2021</span>
          </div>
        </div>
        <div class="order-1 w-5/12"></div>
      </div>
      <div class="mb-8 flex justify-between items-center w-full right-timeline">
        <div class="order-1 w-5/12"></div>
        <div class="order-1 w-5/12 px-1 py-4 text-right">
          <div class="bg-white p-4 rounded-lg shadow-lg inline-block">
            <h3 class="font-bold text-lg mb-1">Event Three</h3>
            <p class="text-gray-600">Description for event three. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <span class="text-sm text-gray-500">June 2021</span>
          </div>
        </div>
      </div>
      <div class="mb-8 flex justify-between items-center w-full left-timeline">
        <div class="order-1 w-5/12 px-1 py-4 text-left">
          <div class="bg-white p-4 rounded-lg shadow-lg inline-block">
            <h3 class="font-bold text-lg mb-1">Event Four</h3>
            <p class="text-gray-600">Description for event four. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <span class="text-sm text-gray-500">September 2021</span>
          </div>
        </div>
        <div class="order-1 w-5/12"></div>
      </div>
      <div class="mb-8 flex justify-between items-center w-full right-timeline">
        <div class="order-1 w-5/12"></div>
        <div class="order-1 w-5/12 px-1 py-4 text-right">
          <div class="bg-white p-4 rounded-lg shadow-lg inline-block">
            <h3 class="font-bold text-lg mb-1">Event Five</h3>
            <p class="text-gray-600">Description for event five. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <span class="text-sm text-gray-500">December 2021</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>