JSFiddle - React, Tailwind, and code Playground

HTML

<div>center</div>
<div class="second">hover me</div>

CSS

div{
    width : 500px;
    height : 500px;
    position : absolute;
    bottom : 0;
    line-height : 500px;
    text-align : center;
    font-size : 30px;
    
    background-color : red;
    background-color : rgba(255,0,0,.2);
   
    
    -webkit-transform-origin : 50% 100%;
    -moz-transform-origin : 50% 100%;
    -o-transform-origin : 50% 100%;
    -ms-transform-origin : 50% 100%;
    transform-origin : 50% 100%; 
    
    -webkit-transition : all ease-in 1s;    
    -moz-transition : all ease-in 1s;
    -o-transition : all ease-in 1s;  
    -ms-transition : all ease-in 1s;
    transition : all ease-in 1s;    
}
div.second{
    background-color : #fda1a1;
}
div.second:hover{
    -webkit-transform : scale(0.3);
    -moz-transform : scale(0.3);
    -o-transform : scale(0.3);
    -ms-transform : scale(0.3);
    transform : scale(0.3);
}