JSFiddle - React, Tailwind, and code Playground

by Boris Shpakovsky

HTML

<body>
  <button id="reset">0</button> <button class="right">»</button>
<ul class="block right" style="left: 100px;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

</body>

CSS

ul { 
    position:absolute; 
    
    left:50px;
  }
  ul li {
    display: inline-block;
    list-style: outside none none;
    width:90px; 
    height:90px;
    margin:5px; 
    background-color:#abc; 
  }

JavaScript

$(document).ready(function(){
    
    $(".right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });

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

  });