JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<p><button id="right">Run »</button></p>
<p><button id="left">Run »</button></p>

<div class="block">a</div> <div class="block">b</div>
<div class="block">c</div> <div class="block">d</div>
<div class="block">e</div> <div class="block">f</div>

CSS

div {
   position: relative;
   background-color: #abc;
   width: 40px;
   height: 40px;
   float: left;
   margin: 5px;
}

.container {
     width:40px;
  overflow:hidden;  
}

JavaScript

$("#right").click(function(){
  $(".block").animate({"right": "+=40px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=40px"}, "slow");
});