JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid mf-gap-2x mf-span-items-4">
    <div class="grid-item">
        <div class="content"></div>
    </div>
    <div class="grid-item">
        <div class="content"></div>
    </div>
    <div class="grid-item">
        <div class="content"></div>
    </div>
    <div class="grid-item">
        <div class="content"></div>
    </div>
    <div class="grid-item">
        <div class="content"></div>
    </div>
    <div class="grid-item">
        <div class="content"></div>
    </div>
</div>

CSS

body {margin: 0;}

.grid {
    display: flex;
    flex-flow: row wrap;
}

.grid-item {
    box-sizing: border-box;
}

.mf-gap-2x {
    margin: -20px 0 0 -20px;
}

.mf-gap-2x > .grid-item {
    padding: 20px 0 0 20px;
}

.mf-span-items-4 > .grid-item {
    width: 33.33%;
}


.content {
    height: 50px;
    
    background: #000;
}