Application Timelines Horizontal

<ol
      class="relative flex gap-8 before:absolute before:-mt-px before:h-0.5 before:w-full before:rounded-full before:bg-gray-200"
    >
      <li class="relative -mt-1.5">
        <span class="block size-3 rounded-full bg-blue-600"></span>

        <div class="mt-4">
          <time class="text-xs/none font-medium text-gray-700">12/02/2025</time>

          <h3 class="text-lg font-bold text-gray-900">Kickoff</h3>

          <p class="mt-0.5 text-sm text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
            adipisci tenetur sunt quae exercitationem sed pariatur porro!
          </p>
        </div>
      </li>

      <li class="relative -mt-1.5">
        <span class="block size-3 rounded-full bg-blue-600"></span>

        <div class="mt-4">
          <time class="text-xs/none font-medium text-gray-700">15/03/2025</time>

          <h3 class="text-lg font-bold text-gray-900">First Milestone</h3>

          <p class="mt-0.5 text-sm text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
            adipisci tenetur sunt quae exercitationem sed pariatur porro!
          </p>
        </div>
      </li>

      <li class="relative -mt-1.5">
        <span class="block size-3 rounded-full bg-blue-600"></span>

        <div class="mt-4">
          <time class="text-xs/none font-medium text-gray-700">24/04/2025</time>

          <h3 class="text-lg font-bold text-gray-900">Launch</h3>

          <p class="mt-0.5 text-sm text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
            adipisci tenetur sunt quae exercitationem sed pariatur porro!
          </p>
        </div>
      </li>
    </ol>