JSFiddle - React, Tailwind, and code Playground

by timspqr

HTML

<div id=outer>
    <div id=inner>
    </div>
</div>

CSS

#outer { 
    background-color: blue; 
    padding: 10px;
    width: 600px;
    height: 400px;
}
#inner { 
    background-color: red;
    width: 200px; 
    height: 200px;
    color: white;
    font-size: 48px;
}

JavaScript

$('#inner').hover(
    function(){
               var innerwidth = $('#inner').width();
                   innerwidth = innerwidth * 1.05;
               var innerheight = $('#inner').height();
                   innerheight = innerheight * 1.05;
               $('#outer').css({
                                width: innerwidth,
                                height: innerheight
                                 });
               },
    function(){
               $('#outer').css({
                                width: '600',
                                height: '400'
                                 });
               }
    );