timeline

<section>
  <div class="relative px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="max-w-xl mx-auto text-center lg:text-balance">
      <span
        class="font-mono text-xs font-medium tracking-tight text-blue-600 uppercase"
      >
        Milestones
      </span>
      <h1
        class="mt-4 text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance"
      >
        Key updates & releases
      </h1>
      <p class="mt-6 text-base font-medium text-gray-500">
        Explore the evolution of our product, from the initial launch to the
        latest enhancements.
      </p>
    </div>
    <div class="flex flex-col grid-cols-9 mx-auto mt-12 md:grid">
      <!-- left -->
      <div class="flex flex-row-reverse md:contents">
        <div class="col-start-1 col-end-5 my-4 ml-auto">
          <div class="relative w-full h-full p-4 bg-gray-50 lg:p-8 rounded-xl">
            <span
              class="font-mono text-xs font-medium tracking-tight text-blue-600 uppercase"
              ><time datetime="01.08.2024">01.08.2024</time></span
            >
            <h4 class="mt-8 text-2xl font-medium tracking-tight text-gray-900">
              The dawn of version 3.0.0
            </h4>
            <p class="mt-4 text-base text-gray-500">
              Welcome to the future with Version 3.0.0! This monumental update
              unveils a completely revamped interface, groundbreaking AI-powered
              tools, and seamless integration with your favorite apps. Get ready
              to explore uncharted territories in productivity!
            </p>
            <div class="mt-8">
              <a
                class="relative flex items-center gap-2 text-sm font-medium text-blue-500 duration-300 hover:text-gray-900"
                href="#_"
              >
                Read further
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-chevron-right relative mt-px overflow-visible ml-2.5 size-4"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M9 6l6 6l-6 6"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="relative col-start-5 col-end-6 mr-10 md:mx-auto">
          <div class="flex items-center justify-center w-3 h-full">
            <div
              class="h-full w-[0.05rem] bg-gray-200 pointer-events-none"
            ></div>
          </div>
          <div
            class="absolute w-3 h-3 -mt-3 bg-white border-2 border-blue-500 rounded-full top-1/2"
          ></div>
        </div>
      </div>
      <!-- right -->
      <div class="flex md:contents">
        <div class="relative col-start-5 col-end-6 mr-10 md:mx-auto">
          <div class="flex items-center justify-center w-3 h-full">
            <div
              class="h-full w-[0.05rem] bg-gray-200 pointer-events-none"
            ></div>
          </div>
          <div
            class="absolute w-3 h-3 -mt-3 bg-white border-2 border-blue-500 rounded-full top-1/2"
          ></div>
        </div>
        <div class="col-start-6 col-end-10 my-4 mr-auto">
          <div class="relative w-full h-full p-4 bg-gray-50 lg:p-8 rounded-xl">
            <span
              class="font-mono text-xs font-medium tracking-tight text-blue-600 uppercase"
              ><time datetime="02.13.2024">02.13.2024</time></span
            >
            <h4 class="mt-8 text-2xl font-medium tracking-tight text-gray-900">
              Version 3.1.0: the cosmic leap
            </h4>
            <p class="mt-4 text-base text-gray-500">
              Version 3.1.0 propels you into the cosmos with faster processing
              speeds, enhanced customization options, and new cosmic-themed
              visual elements. Experience the power of the stars at your
              fingertips.
            </p>
            <div class="mt-8">
              <a
                class="relative flex items-center gap-2 text-sm font-medium text-blue-500 duration-300 hover:text-gray-900"
                href="#_"
              >
                Read further
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-chevron-right relative mt-px overflow-visible ml-2.5 size-4"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M9 6l6 6l-6 6"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>