JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cube-cont">

 <div class="right1"></div>  
 <div class="right2"></div>  
 <div class="right3"></div>  
 <div class="right4"></div>  
 <div class="right5"></div>

<div class="cube"></div>
</div>

CSS

.cube-cont {
  width: 20vw;
  height: 20vw;
  background-color: #877c7f;
  margin: 20vh auto;
  position: relative;
}



.right1,
.right2,
.right3,
.right4,
.right5 {
	width: 15vw;
	height: 4vw;
	background-color: #7FC7A6;
	position: absolute;
    top: 0;
    left: 20vw;
    transition: all 1s;
    transform: translateX(-12vw); 
}

.right2 {
	top: 4vw;
}
.right3 {
	top: 8vw;
}
.right4 {
	top: 12vw;
}
.right5 {
	top: 16vw;
}

.right1:hover,
.right2:hover,
.right3:hover,
.right4:hover,
.right5:hover {
	 transform: 1s;
    transform: translateX(0);
}

.cube {
	width: 20vw;
	height: 20vw;
	background-color: #877c7f;
	position: absolute;
	top: 0;
	right: 0;
}