JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:absolute; top:0; left:0; width:100%; height:100%;">
  <div id="content">
  
    <div id="cuadroNegro">
    </div>  
    
    <div id="circulo_1">1  
    </div>  
    
  </div>
</div>

CSS

html, body {width:100%; height:100%;}
 
#content {
    position:relative;
    top:10%;
    left:0;
    width:50%;
    height:70%;
    margin:0 auto 0 auto;
    z-index:1001;
    border:1px solid yellow;
}
#cuadroNegro {
    position:absolute;
    top:35%;
    left:37%;
    width:25%;
    height:35%;
    background-color:black;
    z-index:1000;
}
#circulo_1 {
    position:absolute;
    top:52%;
    left:49%;
    width:5px;
    height:5px;
    opacity:1;
    z-index:1001;
    background-color:#F00;
    -webkit-transition: 
        width 1s,
        height 1s,
        opacity 1s,
        -webkit-transform 1s 1s;

}
#content:hover #circulo_1 {
    width:20%;
    height:25%;
    opacity:1;
    -webkit-transform:translate(-100%,-100%);
}