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 id="eins5">    </div>
<div id="eins6">    </div>
<div id="eins7">    </div>
<div id="eins8">    </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;
}
#eins5 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1104;
}
#eins6 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1105;
}

#eins7 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1106;
}
#eins8 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1107;
}

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

JavaScript

var top = 150;
var left = 0;
 


var xwidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);  
var yheight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var breite = 200;

if(xwidth>0 && xwidth<100){var browserbreite=0}
if(xwidth>101 && xwidth<300){var browserbreite=2}
if(xwidth>301 && xwidth<500){var browserbreite=3}
if(xwidth>501 && xwidth<700){var browserbreite=4}
if(xwidth>701 && xwidth<900){var browserbreite=5}
if(xwidth>901 && xwidth<1100){var browserbreite=6}
if(xwidth>1101 && xwidth<1300){var browserbreite=7}
if(xwidth>1301 && xwidth<1500){var browserbreite=8}
if(xwidth>1501 && xwidth<1700){var browserbreite=9}
var menge = xwidth+parseInt(200)
//var menge = menge.toFixed()/2;
var farbe = 'red';
 alert(browserbreite+'-'+xwidth+'-'+menge)

x=0;
los(x)
function los(x){

if(x<200){
     for(y=1;y<=browserbreite;y++){
          
          if(y==1){y1=-100}
            if(y==2){y1=100}
            if(y==3){y1=300}
            if(y==4){y1=500}
                    if(y==5){y1=700}  
                      if(y==6){y1=900}
                     if(y==7){y1=1100}
                     if(y==8){y1=1300}
                      if(y==9){y1=1500}
          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)

          }, 50);
}
     if(x==200){
          x=0;
          los(x)
     }

}