timeline #1

Preview Code

<div class="max-w-xl mx-auto text-center lg:text-balance">
  <p class="text-sm font-bold uppercase text-blue-600">Tagline</p>
  <h2 class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-zinc-900">
    Key updates & releases
  </h2>
  <p class="text-base mt-4 font-medium text-zinc-500">
    Explore the evolution of our product, from the initial launch to the latest
    enhancements.
  </p>
</div>
<div class="flex flex-col mx-auto mt-12 grid-cols-9 md:grid">
  <!-- left -->
  <div class="flex flex-row-reverse md:contents">
    <div class="my-4 ml-auto col-start-1 col-end-5">
      <div class="relative p-4 size-full bg-zinc-50 lg:p-8 rounded-xl">
        <p class="text-sm font-bold uppercase text-blue-600">
          <time datetime="01.08.2024">01.08.2024</time>
        </p>
        <h3 class="text-lg md:text-xl mt-8 font-medium text-zinc-900">
          The dawn of version 3.0.0
        </h3>
        <p class="text-base mt-4 font-medium text-zinc-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="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-900"
            href="#_"
          >
            Read further
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-chevron-right size-4"
            >
              <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 mr-10 col-start-5 col-end-6 md:mx-auto">
      <div class="flex items-center justify-center w-3 h-full">
        <div class="h-full w-[0.05rem] bg-zinc-200 pointer-events-none"></div>
      </div>
      <div
        class="absolute w-3 h-3 -mt-3 bg-white border-2 rounded-full border-blue-500 top-1/2"
      ></div>
    </div>
  </div>
  <!-- right -->
  <div class="flex md:contents">
    <div class="relative mr-10 col-start-5 col-end-6 md:mx-auto">
      <div class="flex items-center justify-center w-3 h-full">
        <div class="h-full w-[0.05rem] bg-zinc-200 pointer-events-none"></div>
      </div>
      <div
        class="absolute w-3 h-3 -mt-3 bg-white border-2 rounded-full border-blue-500 top-1/2"
      ></div>
    </div>
    <div class="my-4 mr-auto col-start-6 col-end-10">
      <div class="relative p-4 size-full bg-zinc-50 lg:p-8 rounded-xl">
        <p class="text-sm font-bold uppercase text-blue-600">
          <time datetime="01.08.2024">01.08.2024</time>
        </p>
        <h3 class="text-lg md:text-xl mt-8 font-medium text-zinc-900">
          Version 3.1.0: the cosmic leap
        </h3>
        <p class="text-base mt-4 font-medium text-zinc-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="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-900"
            href="#_"
          >
            Read further
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-chevron-right size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M9 6l6 6l-6 6"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>