JSFiddle - React, Tailwind, and code Playground

by Kim_Fierens

HTML

<body>
  <div id="leftparentdiv">
    <div class="subdiv">
      Blabla;
    </div>
  </div>
  <div id="rightparentdiv">
      <div class="subdiv">
      Blabla;
    </div>  
  </div>
</body>

CSS

body{
  background-color: pink;
}

.subdiv{
  width: 25vw;
  border: 1px solid;
}

.subdiv:after{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  box-shadow: 0 8px 25px rgba(0,0,0,0.30);
  transition: all 0.6s ease-in-out;
  opacity: 0;
}

.subdiv:hover {
	transform: scale(1.1,1.1);
}

.subdiv:hover:after {
	opacity: 1;
}


#leftparentdiv{
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid;
  width: 47vw;
  padding:3%;
}

#rightparentdiv{
  position: absolute;
  left: 53vw;
  top: 0;
  border: 1px solid;
  width: 47vw;
  padding: 3%;
  overflow-y: scroll;
}