JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ul>

CSS

* {
    padding:0;
    margin:0;
}
ul {
    list-style:none;
    width:100%;
    min-width:400px;
}
ul li {
    width:25%;
    display:inline-block;
    float:left;
    height:200px;
}
ul li div {
    height:100px;
    width:100px;
    display:inline-block;
}
ul li:nth-child(2n+1) div {
    background:#ff0000;
}
ul li:nth-child(2n+2) div {
    background:#0096ff;
}
ul li:nth-child(4n+2),
ul li:nth-child(4n+3) {
    text-align:center;
    background:#d0d0d0;
}
ul li:nth-child(4n+4) {
    text-align:right;
}