JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<div id="container">
    <div class="box green"></div><!--
    --><div class="box red"></div><!--
    --><div class="box yellow"></div><!--
    --><div class="box green"></div><!--
    --><div class="box red"></div><!--
    --><div class="box hide"></div><!--
    --><div class="box red"></div><!--
    --><div class="box yellow"></div><!--
    --><div class="box green"></div><!--
    --><div class="box hide"></div><!--
    --><div class="box red"></div><!--
</div>

CSS

* {
    margin:0;
    padding:0;
}
#container {
    width:330px;
}
.box {
    display:inline-block;
    height:100px;
    width:100px;
    margin-right:10px;
    background:#ccc;
}
.box.hide {
    display:none;
}
.box:not(.hide):nth-of-type(3n) {
    margin-right:0;
}
.box:not(.hide):nth-of-type(n+4) {
    margin-top:10px;
}
.red {
    background:red;
}
.yellow {
    background:yellow;
}
.green {
    background:green;
}