JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="wrapper">

  <div id="inner">
    <div class="move one">eight</div>
    <div class="move two">seven</div>
    <div class="move three">six</div>
    <div class="move four">five</div>

    <div class="move five">four</div>
    <div class="move six">three</div>
    <div class="move seven">two</div>
    <div class="move eight">one</div>
  </div>


</div>

CSS

* {
  padding: 0px;
  margin: 0px;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

#wrapper {
  width: 100%;
  height: 100%;
  margin: 0% auto;
  overflow: hidden;
  position: absolute;
}

#inner {
  width: 100%;
  height: 20vmin;
  position: absolute;
  top: 60%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: baseline;
}

.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight {
  width: 15vw;
  height: 10vw;
  border: 4px solid #222;
  position: relative;
  display: inline-block;
  margin-left: 10px;
  font-size: 2vmin;
  line-height: 10vw;
  cursor: pointer;
}

.one {
  margin-left: 0px;
}

JavaScript

$(function() {


  console.log($('.eight').offset());

  function loop() {
    $('.move').css({
      left: '-90%',
    });

    $('.move').animate({
      left: '100%'
    }, 10000, 'linear', function() {
      loop();
    });

  }

  loop();


});