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;  }

li:nth-child(-n + 4) { top: 0 }
   li:nth-child(n+5):nth-child(-n + 8) { top: 150px; }
   li:nth-child(n+9):nth-child(-n + 12) {  top: 300px; }