JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="background">
        <div class="row">
            <div class="red-box"></div>
            <div class="red-box"></div>
            <div class="red-box"></div>
            <div class="red-box"></div>
        </div>
        <div class="row">
            <div class="red-box"></div>
            <div class="red-box"></div>
            <div class="red-box"></div>
            <div class="red-box"></div>
        </div>
        <div class="row">
            <div class="red-box"></div>
            <div class="red-box"></div>
        </div>
    </div>
</body>

CSS

.background {
    width: 50%;
    height: 1000px;
    background-color: lime;
}

.red-box {
    width: 24%;
    height: 50px;
    margin-bottom: 10px;
    float: left;
    background-color: #ff0000;
}

.red-box:not(:last-child) {
    margin-right: 1.333333%;
}