JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

  <h1 class="title">HEADER</h1>

  <div class="box">
     <div class="box__item"></div>
     <div class="box__item"></div>
     <div class="box__item"></div>
     <div class="box__item"></div>
     <div class="box__item"></div>

  </div>

</div>

CSS

* { box-sizing: border-box; }

body{
  margin: 0;
  padding: 0;
}

.container{
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.box{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 -15px 0 -15px;
}

.box__item{
  width: calc(25% - 30px);
  height: 60px;
  background-color: red;
  margin: 15px 15px 0;
}