JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="list">
    <div class="list__item">
      swassa
    </div>
    <div class="list__item">
      swassa
    </div>
    <div class="list__item">
      swassa
    </div>
        <div class="list__item">
      swassa
    </div>
        <div class="list__item">
      swassa
    </div>
        <div class="list__item">
      swassa
    </div>
        <div class="list__item">
      swassa
    </div>
  </div>
</div>

CSS

.container {width:800px; border:1px solid #f00;}
.list {
  display: flex; 
  justify-content: start; 
  flex-wrap:wrap;
  margin: 0 20px;
  }
.list__item {
  border:1px solid #000; 
  width:calc(25% - 42px); 
  height:100px; 
  margin:0 20px 40px;
  box-sizing:content-box
  }