JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
  <li class="level1">A
    <ol>
    <li class="level2">B
      <ol>
      <li class="level3">C
      <ol>
        <li class="level4">D</li>
        <li class="level4">D</li>
      </ol> 
      </li>
      <li class="level3">C</li>
      </ol> 
    </li>
    <li class="level2">B</li>
    <li class="level2">B</li>
    </ol>
  </li>
  <li class="level1">A</li>
</ol>

CSS

ol {
  list-style:none;
}

ol ol {
  margin-left: 20px;  
}

li {
  position:relative;
}

.level1:before {
  content:'a. ';
}

.level2:before {
  content:'b. ';
}

.level3:before {
  content:'c. ';
}
.level4:before {
  content:'d. ';
}