JSFiddle - React, Tailwind, and code Playground

by Tyler Brown

HTML

<div id="container">
  <div class="box">
    <div>
         Box 1
    </div>
    <div class="box">
      <div class="box">
         Box 2 (Nested)    
      </div>
    </div>
  </div>
</div>

CSS

#container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.box {
  /* display: flex; */
  /* flex: 1; */
  
  width: 100%;
  /* height: 100%; */
  background: rgba(255, 0, 0, 0.1);
}
.