Tailwind CSS List Design Example (Github Commits section style)

#tailwindcss

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>

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →