JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <h2 id="goLeft">jump left</h2>
    <h2 id="goRight">slide right</h2>
    <h2 id="goLeftAndRight">jump left and slide right</h2>
    <div id="box" class="soft"><p>use headers to move</div>

CSS

h2 {
  cursor:pointer;
}

#box {
  position: fixed;
  top:100px;
  left:400px;
  height:100px;
  width:100px;
  background-color:#358;
}

#box p {
  padding:5px;
  color:#fff;
  text-align:center;
}

.soft {
  transition: all 0.3s ease-out;
}

JavaScript

$(document).ready(function() {
  $('#goLeft').on('click',function() {
    $('#box').css('left','300px');
  });
  $('#goRight').on('click',function() {
    $('#box').css('left','400px');
  });
  $('#goLeftAndRight').on('click',function() {
    //copy
    $('#box').css('left','300px');
    
    setTimeout(function(){  $('#box').css('left','400px');     }, 300);
    //Need for timeout?
    //copy
   
  });
});