JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
</div>

CSS

.container {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 200px;
    height: 200px;
    border: solid 1px gray;
}

.container div {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.container div:nth-child(4n+1) {
    background-color: yellow;
    margin-right: 20px;
    margin-bottom: 20px;
}

.container div:nth-child(4n+2) {
    position: relative;
    left: -20px;
    margin-right: -20px;
}

.container div:nth-child(4n+3) {
    position: relative;
    left: -46px;
    top: 20px;
    margin-right: -20px;
}

.container div:nth-child(4n) {
    position: relative;
    left: -26px;
    top: 20px;
    margin-right: -20px;
}