JSFiddle - React, Tailwind, and code Playground

HTML

<div id="todos">
    <div id="div1" class="cell"></div>
    <div id="div2" class="cell"></div>
    <div id="div3" class="cell"></div>
    <div id="div4" class="cell"></div>
</div>

CSS

.cell {
    width:50px;
    height:50px;
    float: left;
}
#div1 {
    background:red;
}
#div2 {
    background:blue;
}
#div3 {
    background:green;
}
#div4 {
    background:yellow;
}
#todos {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100px;
    margin: auto;
}