JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c-1">
  <div class="c-2">
    <div class="item">

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

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

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

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

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

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

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

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

    </div>

  </div>
</div>

CSS

.c-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  /* test */
  height: 1000px;
  background-color: red;
}

.c-2 {
  display: flex;
  flex-wrap: wrap;

  flex-direction: row;
  justify-content: flex-start;

  width: 80vw;
  /* test */
  background-color: green;
}

.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 1rem;
}