JSFiddle - React, Tailwind, and code Playground

HTML

<div class=container>
<div class="div1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.</p>
  </div>

  <div class="div2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.</p>
  </div>

  <div class="div3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.</p>
  </div>


</div>

CSS

.container {
   width: 250px;
   height: 250px;
   margin: 50px auto;
   background: tomato;
   position: relative;
 }

 
 .div1 p {
   margin: 0;
   font-size: 1.1em;
   font-family: monospace;
 }
 

 .div1,
 .div2,
 .div3 {
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100%;
   transition: transform 250ms, transform-origin 0ms linear 250ms;
   z-index: 2;
   background-color: dodgerblue;
   position: absolute;
   left: 0;
   top: 0;
   box-sizing: border-box;
    
 }
 

 
 .div1 {
   visibility: visible;
   background: green;
 }
 
 
 .div2 {
   background: orange;
   transform: scaleY(0);
 }
 
 .div3 {
    transform: scaleX(0);
 }
 
 .div1 p,
 .div2 p,
 .div3 p {
   padding: 25px 10px;
   font-size: .8em;
   font-family: monospace;
   background: red;
 }
 
 .from-left {
   transition: transform 250ms, transform-origin 0ms;
   transform: scaleX(1);
   transform-origin: 0 50%;
 }
 
 .from-up {
   transition: transform 250ms, transform-origin 0ms;
   transform-origin: 50% 0;
   transform: scaleY(1);
 }

JavaScript

function readCursorPosition(event, elementID, scaleYId, scaleXId) {
  var positionElem = document.querySelector(".container").getBoundingClientRect(),
    left = positionElem.left,
    top = positionElem.top,
    elementScaleY = document.getElementsByClassName("div2")[0],
    elementScaleX = document.getElementsByClassName("div3")[0];

  //            //z lefej
  if (event.clientX >= left && event.clientX <= left + 20) {
    elementScaleX.classList.toggle("from-left");
  }
  //            //z góry
  else if (event.clientY >= top && event.clientY <= top + 20) {
    elementScaleY.classList.toggle("from-up");
  }
}


document.querySelector(".container").addEventListener("mouseenter", function(event) {
  readCursorPosition(event)
}, false);