JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="img">
    <li>(group) As only</li>
    <ol class="img">
      <li><span></span>AB</li>
      <li><span></span>AC</li>
    </ol>
    <li>(group) Bs only</li>
      <ol class="img">
        <li><span></span>BA</li>
        <li><span></span>BC</li>
      </ol>
    <li>(group) Cs only</li>
    <ol class="img">
      <li><span></span>CA</li>
      <li><span></span>CB</li>
    </ol>
</ol>

CSS

ol.img li {
  position: relative;
}

ol.img span {
  width: 10px;
  height: 10px;
  display: block;
  background: blue;
  position: absolute;
  left: -30px;
  top: 3px;
}