JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">
  <div id="green2"></div>
  <div id="blue3"></div>
</div>
<div id="d4">
  <div id="black5"></div>
  <div id="yellow6"></div>
</div>

CSS

#d1 {
/*   height: 300px;  */
  background-color: red;
  position: relative;
  overflow: visible;
}

#green2 {
  background-color: green;
  height: 50px;
  width: 50px;
  position: absolute;
  bottom: 0px;
  top: 200px;
  left: 200px;
}

#blue3 {
  background-color: blue;
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 0px;
  top: 100px;
}

#d4 {
  background-color: gray;
  position: relative;
  overflow: visible;
}

#black5 {
  background-color: black;
  height: 50px;
  width: 50px;
  position: absolute;
  bottom: 0px;
  top: 30px;
  left: 50px;
}

#yellow6 {
  background-color: yellow;
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 0px;
  top: 100px;
  left: 250px;
}