JSFiddle - React, Tailwind, and code Playground

by R3oLoN

HTML

<div class="container">
    <div class="slide"></div>
    <button id="btSlide">Slide</button>
</div>

CSS

.container {
    border: 1px solid black;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.slide{
    border: 1px solid black;
    width: 250px;
    height: 250px;
    margin-left:-200px;
}

JavaScript

$('#btSlide').on('click',function(){
    var slide = $('div.slide');
    slide.animate({
        'margin-left': slide.data('open') ? "-200px" : "0"
    }, 500);
    slide.data('open', !slide.data('open'));
});