JSFiddle - React, Tailwind, and code Playground

by Cupidvogel

HTML

<div id = 'cont'>
<div id = 'slider'>
<div id = 'i1'></div>
<div id = 'i2'></div>
<div id = 'i3'></div>
</div>
</div>

CSS

#i1,#i2,#i3 { float: left; display: inline-block; height: 50px; width: 50px;  }
#i1 { background: red; }
#i2 { background: green; }
#i3 { background: yellow; }
#cont { width: 150px; background: blue; height: 60px; position: relative; overflow: hidden; }
#slider { position: absolute; top: 10px; left: 0px; width: 150px; height: 50px; }

JavaScript

$("#i1").click(function(){
    $("#slider")animate({left: "-=50px"},1000);
  });