JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="one">1</li>
    <li class="one">2</li>
    <li class="one">3</li>
    <li class="two reset">4</li>
    <li class="two">5</li>
    <li class="two">6</li>
    <li class="three reset">7</li>
    <li class="three">8</li>
</ul>

CSS

li { line-height: 39px; height: 39px; width: 20px; margin: 0; padding: 0}
.oned { float: left; clear: left; }
.two { margin-left: 20px;  }
.three { margin-left: 40px; }
.reset {  margin-top:-117px; }