JSFiddle - React, Tailwind, and code Playground

by Ky0suke

HTML

<h1>Avant :</h1>
<div class="container before">
  <div>
    div1
  </div>
  <div>
    div2
  </div>
  <div>
    div3
  </div>
</div>
<h1>Après :</h1>
<div class="container after">
  <div>
    div1
  </div>
  <div>
    div2
  </div>
  <div>
    div3
  </div>
</div>

SCSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  background-color: grey;
}

.container > div {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.container.after > div {
  vertical-align: middle;
}

.container > div:nth-child(1) {
  background-color: #FFC0CB;
}

.container > div:nth-child(2) {
  background-color: #FFA500;
  border: #000 10px solid;
}

.container > div:nth-child(3) {
  background-color: #FFFF00;
}