JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="text">
        s
    </div>
</div>

CSS

#container{width:600px; height:100%; position:relative;}
.text{position:absolute; left:0; top:0; width:200px; height:800px; background:#000000;}

JavaScript

$(function(){
    $('.text').mouseenter(function(){
        $(this).stop(true,true).fadeOut();
    }).mouseleave(function(){
        $(this).stop(true,true).fadeIn();
    });
});