JSFiddle - React, Tailwind, and code Playground

by Sedbol

HTML

<div class="list">
   <div class="box">
      <div class="boxin"></div>
   </div>
   <div class="box">
      <div class="boxin"></div>
   </div>
   <div class="box">
      <div class="boxin"></div>
   </div>
   <div class="box">
      <div class="boxin"></div>
   </div>
   <div class="box">
      <div class="boxin"></div>
   </div>
   <div class="box">
      <div class="boxin"></div>
   </div>
</div>

CSS

.list {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   
}

.box {
   width: 100px;
   height: 50px;
   background-color: gray;
   padding: 0 15px;
}

.box:first-child {
   padding-left: 0;
}

.box:last-child {
   padding-right: 0;
}

.boxin {
   width: 100%;
   height: 100%;
   background-color: aqua;
}