JSFiddle - React, Tailwind, and code Playground

by verygreen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 <div id="inner"></div>

CSS

#inner {
  width: 100%;
  height: 60vmin;
  visibility: hidden;
  position: absolute;
  top: 65%;
  text-align: center;
}

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

JavaScript

var counter = 1;
var correct = [];
var wrong = [];

var boxes = [];
var speeds = [
0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7
];
var currentWidth = $('#inner>div').width();

function createDiv() {
  var words = ['number', 'count', 'height', 'weight', 'cost', 'address', 'tell time', 'exchange'];
  var classEL = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];

  for (var i = 0; i < words.length; i++) {
    innerDivEL = $('<div></div>');
    innerDivEL.addClass(classEL[i]);
    innerDivEL.addClass('move');
    innerDivEL.text(words[i]);
    $('#inner').append(innerDivEL);
    boxes.push(innerDivEL);
  }
}

function loop() {

  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
      });



      $('.move').sortable();

      if (leftPos > $(window).width()) {
        if ($(box).position().left > $(window).width()) {
          $(box).css({
            visibility: 'visible'
          })
        }

        $(window).resize(function () {
          $('.move').each(function (i) {
            $(this).css('left', i * 13 + 'vmin');
          });
        });

        $(box).css('left', -13 + 'vmin');
      }
    }
    window.setTimeout(update, 17);
  };

  $('.move').each(function (i) {
    $(this).css({
      'left': i * 13 + 'vmin',
      top: 0
    });
  });
  update();
};

function dragging() {
  $('.move').draggable({
    containment: "#wrapper",
    revert: function (event, ui) {
      //      $(this).css({
      //          left: $(this).position().left,
      //          top: 0
      //        })
      //          $('.move').each(function (i) {
      //          if ($(this) == $('.eight')) {
      //            $(this).animate({
      //              'left': $('.seven').position().left + (13 + 'vmin'),
      //              top: 0
      //            });
      //          }

  ...