Tailwind CSS List Design Example (Github Commits section style)

Tried to re-create the list style of Github commits section. It has a left margin for the entire list and an identifier against each list item. After a couple of tries, I got it right.

Expected Result

Achieved Result

Code

<div class="relative flex flex-col">
  <div
    class="absolute border-r-2 border-gray-200 bottom-1 top-1 dark:border-gray-800"
    style="z-index: -1; left: 15px"
  ></div>
  <ul>
    <li>
      <div class="flex">
        <div
          class="list-item-indicator w-8 h-8 rounded-full shrink-0 border-8 bg-neutral-400 border-zinc-50"
        ></div>
        <a class="list-item-title font-medium py-1 px-2" href="#">Heading 1</a>
      </div>
      <div class="list-item-description p-2 ml-12 text-neutral-500">
        <span>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate
          reiciendis sed, illum animi nostrum amet nesciunt rerum at.
        </span>
      </div>
    </li>
    <li>
      <div class="flex">
        <div
          class="list-item-indicator w-8 h-8 rounded-full shrink-0 border-8 bg-neutral-400 border-zinc-50"
        ></div>
        <a class="list-item-title font-medium py-1 px-2" href="#">Heading 2</a>
      </div>
      <div class="list-item-description p-2 ml-12 text-neutral-500">
        <span>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate
          reiciendis sed, illum animi nostrum amet nesciunt rerum at.
        </span>
      </div>
    </li>
  </ul>
</div>