JSFiddle - React, Tailwind, and code Playground

by jean-philippe janecek

HTML

<button>slide</button>
<div id="slider" class="transition"></div>

CSS

#slider{
    background:blue;
    height:100px;
    width:500px;
    position:relative;
    left:-520px;
    
    
}
.open{
    left:0px !important;
    
}
.transition{
    
  -webkit-transition: left 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: left 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: left 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: left 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */

}

JavaScript

$('button').on('click', function(){
    $('#slider').toggleClass('open');

})