JSFiddle - React, Tailwind, and code Playground

CSS

html, body { height:100%; background:#EAEAEA; }
.container { 
  position:relative;
  height: 0;
  padding-bottom: 100%;
}
.o,.b,.g { 
  position:absolute; 
  top: 36%; left:50%; 
  height:30%; width:30%;  
  background-size:
    66% 66%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 100%, 0px 0px;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
.o:before,.b:before,.g:before,.o:after,.b:after,.g:after {
  /*content:'';*/
  position:absolute;
  right: 0px;
  bottom: 0px;
  background-size:
    66% 66%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 100%, 0px 0px;
}
.o:before,.b:before,.g:before {
  background-image: linear-gradient(0deg,#eaeaea,#eaeaea), linear-gradient(0deg,red,red);
  height:66%; width:66%;
   -webkit-transform: translate(33%, 33%); 
  transform: translate(33%, 33%); 
}
.o:after,.b:after,.g:after {
  background:green;
  height:33%; width:33%;
  -webkit-transform: translate(100%, 100%); 
  transform: translate(100%, 100%); 
}

.o { 
  background-image: linear-gradient(0deg,#EAEAEA,#EAEAEA),      linear-gradient(0deg,#E46C49,#E46C49);
  -webkit-transform: rotate(120deg) skewY(-30deg) scaleX(0.863);
  transform: rotate(120deg) skewY(-30deg) scaleX(0.863);
}
.b { 
  background-image: 
    linear-gradient(0deg,#EAEAEA,#EAEAEA),
    linear-gradient(0deg,#4498BD,#4498BD); 
  -webkit-transform: skewY(-30deg) scaleX(0.863);
  transform: skewY(-30deg) scaleX(0.863);
}
.g { 
  background-image: 
    linear-gradient(0deg,#EAEAEA,#EAEAEA),
    linear-gradient(0deg,#96AA37,#96AA37); 
  -webkit-transform: rotate(-120deg) skewY(-30deg) scaleX(0.863);
  transform: rotate(-120deg) skewY(-30deg) scaleX(0.863);
}