JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
     <div class="wrap">
         <div class="box"></div>
         <div class="box"></div>
     </div>
</div>

CSS

#container {
    width: 300px;
    height: 300px;    
}
.box {
    width: 50px;
    height: 50px; 
    float:left;
    margin: 1px 1px 1px 1px;
    background-color: red;  
}
.wrap {
    width: 150px;
    height: 50px; 
    float: left;
    margin: 1px 1px 1px 1px;
}

JavaScript

$('.box').hover(function() {
    $(this).stop().animate({
        "opacity": .4
    }, 400);
}, function() {
    $(this).stop().animate({
        "opacity": 1
    }, 50)
});