<!-- component -->

<div class="container mx-auto">
    <div class="relative wrap overflow-hidden px-2 mx-2 sm:mx-20 md:mx-28 lg:mx-40 my-8">
      <h2 class="text-center py-4">BetterToken Roadmap</h2>

      <hr class="green_line">
      <br>
      <br>
      <div class="border-2-2 absolute border-opacity-20 border-green-700 h-full border" style="left: 50%"></div>

      <!-- 2017 right timeline -->
      <div class="mb-8 flex justify-between items-center w-full right-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">2017<br>Genesis Pool Cooperative</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">
            First European ThreeFold Farming Cooperative</p>
        </div>
      </div>
  
      <!-- 2018 left timeline -->
      <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto text-white font-semibold text-lg">2</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">2018<br>SoHo Node Vendor</h3>
          <p class="text-sm font-medium leading-snug tracking-wide text-gray-900text-opacity-100">Released Multiple Node Servers to Make Threefold Farming Easy for all. </p>
        </div>
      </div>

       <!-- 2020/2021 right timeline -->
       <div class="mb-8 flex justify-between items-center w-full right-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">2020/2021<br>Expand</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Expand Co-Farming Pool in Lochristi<br>
            Start Cloud Farming Offer</p>
        </div>
      </div>

    </div>
  </div>

  <style>
    .green_header{
    color:#68b622 ;
    }
  </style>
 