JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Asim chart</title>

    <link rel="stylesheet" href="style.css">
	 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
    <script src="digits.js"></script> 
	
  </head>
  <body class="EN">
    <h1>charts</h1>
    <h3>charts difference</h3>
    <div class="menu">
      <span class="" title="R_100">100</span>
      <span class="menu-active" title="R_10">10</span>
      <span class="" title="R_25">25</span>
      <span class="" title="R_50">50</span>
      <span class="" title="R_75">75</span>
      <span class="" title="RDBEAR">ODD/EVEN</span>
      <span class="" title="RDBULL">MATCH/DIFFERS</span>
    </div>
    <p>Charts might take up to 30 secs to load.. please wait...</p>
    <div id="digits" class="digits">
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
      <span class="_"></span>
    </div>
    <div class="chartContainer" id="chartContainer"></div>
  

  
    <div class="disclaimer">
    </div>
  
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0 10px;
  font-size: 16px;
  text-align: center;
  font-family: "Arial", sans-serif;
}
h1 {
  font-size: 34px;
}
.menu {
  margin-bottom: 16px;
  display: flex;
}
.menu span {
  padding: 3px 0;
  flex-basis: auto;
  flex-grow: 1;
  text-align: center;
  font-size: 16px;
  border-radius: 5px;
  color: #fff;
  background-color: #666666;
}
.menu span:hover {
  background: #191919;
}
span.menu-active {
  background: #191919;
}
.digits {
  margin-bottom: 20px;
  display: flex;
}
.disclaimer {
  font-size: 11px;
  text-align: center;
  font-family: "Arial", sans-serif;
  color: #707070;
}
.digits span {
  padding: 25px 0;
  flex-basis: auto;
  flex-grow: 1;
  text-align: center;
  font-size: 24px;
  border-radius: 15px;
  color: #fff;
}
.digits_moved_down {
  background-color: #c03;
}
.digits_moved_up {
  background-color: #29abe2;
}
.chartContainer {
  min-height: 350px;
  min-width: 50px;
}

JavaScript

window.addEventListener(
  'load',
  function (e) {
    var ws,
        b,
        rnd,
        spot,
        time,
        dps,
        xd,
        digit,
        cnt,
        random,
        id,
        lng,
        str,
        chart,
        xVal,
        yVal,
        mType,
        mColor,
        rndMenu;

    str = ['R_100', 'R_10', 'R_25', 'R_50', 'R_75', 'RDBEAR', 'RDBULL'];
    dps = [];
    time = [0];
    spot = [0];
    digit = [0];
    mType = 'none';
    mColor = '#32cd32';
    lng = 'EN';
    xVal = 0;
    yVal = 0;
    cnt = 20;

    rndMenu = document.querySelectorAll('div.menu > span');

    for (var i = 0; i < rndMenu.length; i++) {
      clickMenu(rndMenu[i]);
    }

    function toggleMenu(data) {
      for (var i = 0; i < rndMenu.length; i++) {
        rndMenu[i].classList.remove('menu-active');
      }
      data.classList.add('menu-active');
    }

    function clickMenu(data) {
      data.addEventListener('click', function () {
        toggleMenu(data);
      });
    }

    function toggleDigit(d, m) {
      var nameClass = document.querySelector(
        '#digits > span:nth-child(' + d + ')'
      ).className;
      if (nameClass != 'digits_moved_' + m) {
        document
          .querySelector('#digits > span:nth-child(' + d + ')')
          .classList.remove(nameClass);
        document
          .querySelector('#digits > span:nth-child(' + d + ')')
          .classList.add('digits_moved_' + m);
      }
    }

    function rndGet() {
      random = document.querySelector(
        'body > div.menu > span.menu-active'
      ).title;
      switch (random) {
        case str[0]:
          rnd = 'R_100';
          xd = 2;
          break;
        case str[1]:
          rnd = 'R_10';
          xd = 3;
          break;
        case str[2]:
          rnd = 'R_25';
          xd = 3;
          break;
        case str[3]:
          rnd = 'R_50';
          xd = 4;
          break;
        case str[4]:
          rnd = 'R_75';
          xd = 4;
...