JSFiddle - React, Tailwind, and code Playground

HTML

<div class="conteneurCentral">
    <div class="box size1 color2"></div>
    <div class="box size1 color1"></div>
    <div class="box size1 color4"></div>
    <div class="box size1 color1"></div>
    <div class="box size2 color3"></div>
    <div class="box size2 color4"></div>
</div>

CSS

.conteneurCentral {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around; /*flex-start | flex-end | center | space-between | space-around*/
  align-items: stretch; /*flex-start | flex-end | center | baseline | stretch*/
  align-content: flex-end; /*flex-start | flex-end | center | space-between | space-around | stretch*/
}
.box {
  height: 50px;
  position: relative;
}
.size1 {
  flex: 1 1 100px;
}
.size2 {
  flex: 2 1 200px;
}
.size3 {
  flex: 3 1 300px;
}
.size4 {
  flex: 4 1 400px;
}
.color1 {
  background: #2ecc71;
}
.color2 {
  background: #3498db;
}
.color3 {
  background: #f1c40f;
}
.color4 {
  background: #e74c3c;
}