JSFiddle - React, Tailwind, and code Playground

by verygreen

HTML

<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>

CSS

#inner {
  width: 100%;
  height: 60vmin;
  visibility: hidden;
  position: absolute;
  top: 60%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.move {
  position: absolute;
}


/*USE VMIN for left values*/

.one {
  /*  top: 0;*/
  left: 0;
}

.two {
  left: 12vmin;
  /*  left: calc(100%/8 * 10);*/
}

.three {
  left: 24vmin;
  /*  left: calc();*/
}

.four {
  left: 36vmin;
  /*  left: calc();*/
}

.five {
  left: 48vmin;
  /*  left: calc();*/
}

.six {
  left: 60vmin;
  /*  left: calc();*/
}

.seven {
  left: 72vmin;
  /*  left: calc();*/
}

.eight {
  left: 84vmin;
  /*  left: calc();*/
}

.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight {
  width: 10vmin;
  height: 10vmin;
  border: 2px solid #222;
  font-size: 2vmin;
  line-height: 10vmin;
  cursor: pointer;
}

.one {
  margin-left: 0;
}

JavaScript

function loop() {
  var boxes = $('#inner>div');
  var speeds = [
0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5
];

  function update() {
    // update boxes
    for (var i = 0; i < boxes.length; i++) {
      var box = $(boxes[i]);
      var speed = speeds[i];
      var leftPos = box.position().left;

      box.css({
        left: leftPos + speed
      });

      if (leftPos > $(window).width()) {
        test.push(box);
        $(window).resize(function () {
          //          collision($('.six'), $('.seven'))

          //          $('#inner>div:nth-child(even)').css({
          //            left: '+=2vmin',
          //            marginLeft: '10px'
          //          })
          //
          //          $('#inner>div:nth-child(odd)').css({
          //            left: '+=2vmin',
          //            marginLeft: '10px'
          //          })
          $('#inner>div:nth-child(1)').css({
            left: '+=2vmin',
            //            marginLeft: '+=10px'
          })

          $('#inner>div:nth-child(2)').css({
            left: '+=2vmin',
            //            marginLeft: '+=10px'
          })

          $('#inner>div:nth-child(3)').css({
            left: '+=2vmin',
            //            marginLeft: '+=10px'
          })

          $('#inner>div:nth-child(4)').css({
            left: '+=2vmin',
            //            marginLeft: '+=10px'
          })

          $('#inner>div:nth-child(5)').css({
            left: '+=2vmin',
            //            marginLeft: '+=10px'
          })

          $('#inner>div:nth-child(6)').css({
            left: '+=2vmin',
            //            marginLeft: '+=10px'
          })

          $('#inner>div:nth-child(7)').css({
            left: '+=2vmin',
            //            marginLeft: '+=10px'
          })

          $('#inner>div:nth-child(8)').css({
            left: '+=2vmin',
          })


          //            marginLeft: '+=10px'

        });
        //        console.log(test)
     ...