JSFiddle - React, Tailwind, and code Playground

by henser

HTML

<div onclick="move(this.children[0]);" class="example_path">
    <div class="example_block"></div>
</div>

CSS

.example_path {
width:200px;
height:30px;
border: 1px solid gray;
}

.example_block{
width:30px;
height:30px;
background-color:blue;
position:absolute;
}

JavaScript

function move(elem) {
  var left = 0;

  function frame() {
    left++;

    elem.style.left = left + 'px';

    if (left == 100) {
      clearInterval(id); }
  }

  var id = setInterval(frame, 17);
}