JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="button" value="run"></input>
<div id="slide1" class="style slide"></div>
<div id="slide2" class="style anime"></div>
<div id="slide3" class="style anime slide"></div>

CSS

body {
    margin:0;
    padding:0;
    height:100%
}
.style {
    width:30px;
    height:30px;
    background-color:blue;
}
.slide {
    width:200px;
    display:none;
}
.anime {
    position:absolute;
    left:0px;
    top:56px;
    background-color:red;
}
#slide3{
    display:block;
    left:-200px;
    background-color:grey;
    top:86px;
}

JavaScript

$('input').on('click', function () {
    $('#slide1').css('display', '');
    $('#slide2').css('left', '');
    $('#slide3').css('left', '');
    $('#slide1').show('slide', { direction: 'left' }, 500);
    $('#slide2').animate({ left: '170px' }, 500);
    $('#slide3').animate({ left: '+=200' }, 500);
});