JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box red">1</div>
  <div class="box blue">2</div>
  <div class="box green">3</div>
  <div class="box violet">4</div>
  <div class="box orange">5</div>
  <div class="box yellow">6</div>
  <div class="box tur">7</div>
</div>

CSS

.container{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  
  border:3px dotted #ddd;
  box-sizing:border-box;
  font-family:sans-serif;
  background-color:mistyrose;
}
.box{
  color:#fff;
  text-shadow:4px 4px 0 rgba(0,0,0,0.1);
  text-align:center;
  box-sizing:border-box;
  font-size:100px;
  padding:0 10px;
}
.box.red{
  background-color:#e74c3c;
}
.box.blue{
  background-color:#3498db;
}
.box.green{
  background-color:#2ecc71;
}
.box.violet{
  background-color:#9b59b6;
}
.box.orange{
  background-color:#e67e22;
}
.box.yellow{
  background-color:#f1c40f;
}
.box.tur{
  background-color:#1abc9c;
}