JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" class="off" style="width:200px; height:200px; overflow:auto">Wooloo</div>

<div id="test2" class="off2" style="width:200px; height:200px; overflow:auto">Wooloo</div>

CSS

.off{margin:5px;border:20px solid #000;}
.on{margin:0px;border:25px solid #000;}

.off2{padding:5px;border:20px solid #000;}
.on2{padding:0px;border:25px solid #000;}

JavaScript

$(function() {
    jQuery("#test, #test2").mouseenter( function() {
    jQuery(this).css("outlineStyle", "solid").animate({
        'outlineWidth': '5px'
    }, 500);
}).mouseout( function() {
    jQuery(this).animate({
        'outlineWidth': '0px'
    }, 500).css("outlineStyle", "solid");
});
});