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() {
    $("#test").mouseenter(function() {
        $(this).switchClass("off","on", 500);
    }).mouseleave(function() {
        $(this).switchClass("on","off", 500);
    }).click(function() {
        alert('yo');
    });
    $("#test2").mouseenter(function() {
        $(this).switchClass("off2","on2", 500);
    }).mouseleave(function() {
        $(this).switchClass("on2","off2", 500);
    }).click(function() {
        alert('yo');
    });
});