JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="cube">do</div>
    <div class="cube">ray</div>
    <div class="cube">me</div>
    <div class="cube">fa</div>
    <div class="cube">so</div>
    <div class="cube">la</div>
    <div class="cube">te</div>
    <div class="cube">do</div>
</div>

CSS

html {
    background: #CCC;
}

.container {
    width: 450px;
    padding: 1em;
    background: #000;
    margin: auto;
}

.container::after {
    display: block;
    clear: both;
    content: "";
}

.cube {
    float: left;
    background: #FFF;
    text-align: center;
    line-height: 150px;
    width: 150px; height: 150px;
}

.cube:nth-of-type(2n) {
    background: #DDF;
}