JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#inner
    {
      background: #ABC;
      width: 200px; height: 200px;
    }
    #outer
    {
      background: #DEF;
      width: 200px; height: 200px;
    }

JavaScript

$(function(){

    var $outer = $('#outer');
    $('#inner').hover(function() {
        $outer.animate({ 'padding': '20px' }, 500);
    }, function() {
        $outer.animate({ 'padding': '0px' }, 500);
    });     
});