JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
div.numberBox { float: left; margin: 2%; width: 15%; height: 200px; }
div.active0 { background-color: #ff0000; }
div.active1 { background-color: #111111; }
div.active2 { background-color: #222222; }
div.active3 { background-color: #333333; }
div.active4 { background-color: #444444; }
div.active5 { background-color: #555555; }
div.active6 { background-color: #666666; }
div.active7 { background-color: #777777; }
div.active8 { background-color: #888888; }
div.active9 { background-color: #999999; }
div.active10 { background-color: #0000ff; }
div.content { font-size: 5em; text-align: center; margin: 20% 5% 0 5%; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>$.noConflict();</script>
<!--<script type="text/javascript" src="customq.js"></script>-->
<!-- Using the standard fx queue presents no problems at all. -->
<script type="text/javascript" src="standardq.js"></script>
</head>

<body>
<div class="anim">
  <div class="numberBox active0"><div class="content">0</div></div>
  <div class="numberBox active0"><div class="content">0</div></div>
  <div class="numberBox active0"><div class="content">0</div></div>
  <div class="numberBox active0"><div class="content">0</div></div>
  <div class="numberBox active0"><div class="content">0</div></div>
</div>

</body>
</html>

JavaScript

jQuery(document).ready(function($) {
  var anim = {
    mouseenterFunc: function(e) {
      var elem = $(this);
      elem.stop(true, true); // Stop animation first.
      // Check which animation state we're in, then start to fade in from there.
      var start = 1;
      if (elem.hasClass('active10')) { return true; }
      else if (elem.hasClass('active1')) { start = 1; }
      else if (elem.hasClass('active2')) { start = 2; }
      else if (elem.hasClass('active3')) { start = 3; }
      else if (elem.hasClass('active4')) { start = 4; }
      else if (elem.hasClass('active5')) { start = 5; }
      else if (elem.hasClass('active6')) { start = 6; }
      else if (elem.hasClass('active7')) { start = 7; }
      else if (elem.hasClass('active8')) { start = 8; }
      else if (elem.hasClass('active9')) { start = 9;}
      else { start = 0; }

      var remove = ['active0', 'active1', 'active2', 'active3', 'active4', 'active5', 'active6', 'active7', 'active8', 'active9'],
      add = ['active1', 'active2', 'active3', 'active4', 'active5', 'active6', 'active7', 'active8', 'active9', 'active10'],
      i = start,
      funcs = [function() { elem.switchClass(remove[0], add[0], 1); $('div', elem).html('0'); return true; },
               function() { elem.switchClass(remove[1], add[1], 1); $('div', elem).html('1'); return true; },
               function() { elem.switchClass(remove[2], add[2], 1); $('div', elem).html('2'); return true; },
               function() { elem.switchClass(remove[3], add[3], 1); $('div', elem).html('3'); return true; },
               function() { elem.switchClass(remove[4], add[4], 1); $('div', elem).html('4'); return true; },
               function() { elem.switchClass(remove[5], add[5], 1); $('div', elem).html('5'); return true; },
               function() { elem.switchClass(remove[6], add[6], 1); $('div', elem).html('6'); return true; },
               function() { elem.switchClass(remove[7], add[7], 1); $('div', elem).html('7'); return...