JSFiddle - React, Tailwind, and code Playground

HTML

<div class="css outer">
    <div class="css inner">
    </div>
</div>

<div class="js outer">
    <div class="js inner">
    </div>
</div>

CSS

body { 
    margin: 50px 
}

div {
    height: 100px;
    width: 100px;
    padding: 10px;
    background: green;
}

.inner { 
    background: yellow;
}

.css.outer:hover {
    border: 2px inset red;
}

.css.inner:hover
{
    border: 2px inset blue;
}


.js {
    margin-top: 50px;
}

.js.inner {
    margin-top: 0;
}

JavaScript

$(".js.outer").hover(function() {
    $(this).css({'border': '2px inset red'});
    return false;
}, function() {
    $(this).css({'border': 'none'});
    return false;
});

$(".js.inner").hover(function(event) {
    $(this).css({'border': '2px inset blue'});
    return false;
}, function() {
    $(this).css({'border': 'none'});
    return false;
});