JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="level1">
<li class="level1">top
<ul class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li>
</ul>
<ul class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li...
CSS
body{
}
ul, li{
}
ul.level1{
}
li.level1{
}
ul.level2{
}
li.level2{
}
ul.level3{
}
li.level3{
}