JSFiddle - React, Tailwind, and code Playground

HTML

<li class="block1">1</li>
<li class="block2">2</li>
<li class="block3">3</li>
<li class="block4">4</li>
<li class="block5">5</li>
<li class="block6">6</li>
<li class="block7">7</li>
<li class="block8">8</li>
<li class="block9">9</li>
<li class="block10">10</li>
<li class="block11">11</li>
<li class="block12">12</li>

CSS

li {margin-right: 10px; list-style: none; float: left; position: relative;  top: 0; }
    li.block4 ~ li {  top: 150px; }
    li.block8 ~ li {  top: 300px; }