JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

CSS

body {
    margin: 0;
}

.grid {
    margin: -20px 0 0 -20px;
}

.grid-item {
    width: 25%;
    
    box-sizing: border-box;
    float: left;
    padding: 20px 0 0 20px;
}

.grid-item:before {
    content: "";
    
    display: block;
    
    height: 50px;
    
    background: #aaa;
}