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;}
.list__item {border:1px solid #000; width:calc(25% - 42px); height:100px; margin:0 20px 20px;}