JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li>l</li>
</ul>

CSS

ul {
    width: 210px;
}

li {
    display: block;
    float: left;
    width: 48px;
    height: 48px;
    margin: 0;
    text-align: center;
    border: 1px solid blue;
}

li:first-child,
li:first-child + li,
li:first-child + li + li,
li:first-child + li + li + li {
    margin: 102px 0 -151px 0;
    border-color: red;
}

li:first-child + li + li + li + li,
li:first-child + li + li + li + li + li,
li:first-child + li + li + li + li + li + li,
li:first-child + li + li + li + li + li + li + li {
    margin: 51px 0 -100px 0;
    border-color: cyan;
}