JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<div class="conteneurCentral">
    <div class="box size1 color2">1</div>
    <div class="box size1 color1">2</div>
    <div class="box size1 color4">3</div>
    <div class="box size1 color1">4</div>
    <div class="box size2 color3">5</div>
    <div class="box size3 color4">6</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 {
    line-height: 50px;
    text-align: center;
  height: 50px;
  position: relative;
}
.size1 {
  flex: 1 1 100px;
}
.size2 {
  flex: 2 1 200px;
}
.size3 {
  flex: 0 1 300px;
}
.color1 {
  background: #2ecc71;
}
.color2 {
  background: #3498db;
}
.color3 {
  background: #f1c40f;
}
.color4 {
  background: #e74c3c;
}