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>
Top comments (0)