Timeline

<div class="p-6">
  <div class="rounded-md border border-gray-200 p-6">
    <div class="-space-y-2">
      <div class="relative flex">
        <div class="flex w-5 shrink-0 flex-col items-center">
          <div class="mt-0.5 size-5 shrink-0 rounded-full border-2 border-gray-300 bg-white"></div>
          <div class="h-full w-0.5 bg-gray-300"></div>
        </div>
        <div class="pb-8 pl-6">
          <div class="font-semibold text-gray-900">Package delivered to safe place.</div>
          <div class="mt-0.5 text-sm text-gray-700">Vancouver, CA</div>
        </div>
      </div>

      <div class="relative flex">
        <div class="flex w-5 shrink-0 flex-col items-center">
          <div class="mt-0.5 size-5 shrink-0 rounded-full bg-white ring-4 ring-inset ring-gray-500"></div>
          <div class="h-full w-0.5 bg-gray-500"></div>
        </div>
        <div class="pb-8 pl-6">
          <div class="font-semibold text-gray-900">Package is out for delivery.</div>
          <div class="mt-0.5 text-sm text-gray-700">Burnaby, CA</div>
        </div>
      </div>

      <div class="relative flex">
        <div class="flex w-5 shrink-0 flex-col items-center">
          <div class="mt-1.5 size-2.5 shrink-0 rounded-full bg-gray-500"></div>
          <div class="h-full w-0.5 bg-gray-500"></div>
        </div>
        <div class="pb-8 pl-6">
          <div class="font-semibold text-gray-900">Package arrived at a carrier facility.</div>
          <div class="mt-0.5 text-sm text-gray-700">Burnaby, CA</div>
        </div>
      </div>

      <div class="relative flex">
        <div class="flex w-5 shrink-0 flex-col items-center">
          <div class="mt-1.5 size-2.5 shrink-0 rounded-full bg-gray-500"></div>
          <div class="h-full w-0.5 bg-gray-500"></div>
        </div>
        <div class="pb-8 pl-6">
          <div class="font-semibold text-gray-900">Package left an Amazon facility.</div>
          <div class="mt-0.5 text-sm text-gray-700">Istanbul, TR</div>
        </div>
      </div>

      <div class="relative flex">
        <div class="flex w-5 shrink-0 flex-col items-center">
          <div class="mt-1.5 size-2.5 shrink-0 rounded-full bg-gray-500"></div>
          <div class="h-full w-0.5 bg-gray-500"></div>
        </div>
        <div class="pb-8 pl-6">
          <div class="font-semibold text-gray-900">Package arrived at an Amazon facility.</div>
          <div class="mt-0.5 text-sm text-gray-700">Istanbul, TR</div>
        </div>
      </div>

      <div class="relative flex">
        <div class="flex w-5 shrink-0 flex-col items-center">
          <div class="mt-1.5 size-2.5 shrink-0 rounded-full bg-gray-500"></div>
          <div class="h-full w-0.5 bg-gray-500"></div>
        </div>
        <div class="pb-8 pl-6">
          <div class="font-semibold text-gray-900">Carrier picked up the package.</div>
        </div>
      </div>
    </div>
  </div>
</div>