JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<ul>
  <li><a href="#" class="step" data-toppos="50" data-leftpos="50" data-boxpos="0">Step 1</a></li>
  <li><a href="#" class="step" data-toppos="75" data-leftpos="150" data-boxpos="-200">Step 2</a></li>
  <li><a href="#" class="step" data-toppos="100" data-leftpos="75" data-boxpos="-400">Step 3</a></li>
</ul>
<div class="container">
  <div class="box"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
  <div class="ball">
  </div>
</div>

CSS

.container{
  position: relative;
  margin-top: 50px;
  width: 2000px;
  height: 200px;
  overflow: hidden;
}
.box {
  width: 200px;
  min-height: 200px;
  background-color: black;
  position: relative;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.ball {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  top: 50px;
  left: 50px;
}
button{
  position:absolute;
  top: 50px;
  right: 50px
}
#back {
  top: 75px;
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
}
a {
  font-size: 1.2em;
  background-color: #333;
  border-radius: 4px;
  color: #fff;
  margin-right: 10px;
  padding: 10px 20px;
  text-decoration: none;
  display: block;
 }
 a:hover {
   background-color: #777;
 }

JavaScript

function move( element, toppos, leftpos ) {
	$(element).animate({
  	top: toppos,
    left: leftpos
  });
}

$(".step").on( "click", function(e) {
	var toppos = $(this).data("toppos");
  var leftpos = $(this).data("leftpos");
  var boxpos = $(this).data("boxpos");
  move(".ball", toppos, leftpos);
  move(".box", boxpos, 0);
});