JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left-right">
<div class="slider">Welcome !</div>
</div>

CSS

.left-right {
    overflow:hidden;
    height:200px;
    width:200px;
    position:relative;
    background-color:#333;
}
.slider {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:-200px;
    background-color:#000;
    color:#fff;
}

JavaScript

$(document).ready(function(){
    $('.left-right').mouseover(function(){
        $('.slider').stop().animate({
            right: 0    
        }, 400);                        
    }).mouseout(function(){
        $('.slider').stop().animate({
            right: '-200px'    
        }, 400);     
    });

});