JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidePanel">
        <div class="panelContent">
        <div class="toggle-imagem"></div>
        </div>
        <div class="panelHandle"></div>
        
</div>

CSS

.sidePanel{
    width:285px;
    position:fixed;
    right:-242px;
    top:15%;
    
}
.panelHandle{
    background:#090;
    background-repeat:no-repeat;
    height:240px;
    width:25px;
    float:right;
    cursor:pointer;
}
.panelContent{
    float:right;
    border:1px solid #333333;
    width:240px;
    height:220px;
    background-color:#EEEEEE;
    text-align:center;
    padding-top:20px;
}

.panelHandle p {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    left: -4px;
    margin: 0;
    padding: 0;
    position: relative;
    top: 26px;
}

.toggle-imagem {
    background: #f00;
    background-repeat:no-repeat;
    width:200px;
    height:200px;
    overflow:hidden;
    text-align:center;
}

JavaScript

jQuery(function($) {
    $(document).ready(function() {
        $('.panelHandle').hover(function() {
            $('.sidePanel').stop(true, false).animate({
                'right': '0px'
            }, 900);
        }, function() {
            jQuery.noConflict();
        });

        jQuery('.sidePanel').hover(function() {
            // Do nothing
        }, function() {

            jQuery.noConflict();
            jQuery('.sidePanel').animate({
                right: '-241px'
            }, 800);

        });
    });
});