JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="lvl1">
  <li>A</li>
  <ul class="lvl2"><li>B</li>
   <ul class="lvl3"><li>B</li></ul>
    </ul>
</ul>

CSS

li {
  background: none repeat scroll 0 0 #FF0000;
  list-style: none outside none;
  margin-top: 4px;
}
ul { padding:0px;}
ul.lvl1>li {padding-left:30px;}
ul.lvl2>li {padding-left:60px;}
ul.lvl3>li {padding-left:90px;}