JSFiddle - React, Tailwind, and code Playground

by Alphonsio

HTML

<div class="main">

  <div class="em">2em
    <div class="em">2em  
      <div class="em">2em  
      </div>
    </div>
  </div>

  <div class="rem">2rem
    <div class="rem">2rem  
      <div class="rem">2rem  
      </div>
    </div>
  </div>

</div>

CSS

.main { 
  background-color: #ccc;
  display: flex;
  width: 90vw;
  font-family: monospace;
  padding: 5px;
}

.em {
  border: solid 1px #709e9eff;
  background-color: #709e9e50;
  margin: 10px;
  padding: 5px;
  font-size: 2em;
  flex: 1;
}

.rem {
  border: solid 1px #e1a370ff;
  background-color: #dfc28650;
  margin: 10px;
  padding: 5px;
  font-size: 2rem;
  flex: 1;
}