JSFiddle - React, Tailwind, and code Playground

HTML

<div id="einstellung">
  <div id="eins1"></div>
  <div id="eins2"></div>
  <div id="eins3"></div>
  <div id="eins4"> </div>
</div>

CSS

#einstellung {
  width: 800px;
  height: 100px;
  background-color: black;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1000;
}

#einstellung {
  color: white;
  font-size: 12px;
  overflow: hidden;
  padding-left: 5px;
}

#eins1 {
  width: 100px;
  height: 100px;
  background-color:red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1100;
}

#eins2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1101;
}

#eins3 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1102;
}

#eins4 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1103;
}

JavaScript

x = 0;
 los(x)

 function los(x) {

   if (x <= 100) {
     for (y = 1; y <= 4; y++) {

       if (y == 1) {
         y1 = 0
       }
       if (y == 2) {
         y1 = 200
       }
       if (y == 3) {
         y1 = 400
       }
       if (y == 4) {
         y1 = 600
       }



       var alles = y1;
       var alles1 = Math.round(alles + x);

       document.getElementById('eins' + y).style.left = alles1 + 'px';
       document.getElementById('eins' + y).innerHTML = alles1;
     }


     x++
     window.setTimeout(function() {
       los(x)

     }, 100);
   }

 }