JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-container">
<div id="stat">
	<span id="hit">Right: 0</span>
	<span id="target" margin-left: 8px;></span>
	<span id="miss">Wrong: 0</span>
	<span id="timer">60</span>

<div class="game_settings">
	<div><input class="easy" type="button" value="Easy"></div>
	<div><input class="medium" type="button" value="Medium"></div>
	<div><input class="hard" type="button" value="Hard"></div>
</div>

<div id="container">
	<div id="char0" class="character number" value="0"></div>
	<div id="char1" class="character number" value="1"></div>
	<div id="char2" class="character number" value="2"></div>
	<div id="char3" class="character number" value="3"></div>
	<div id="char4" class="character number" value="4"></div>
	<div id="char5" class="character number" value="5"></div>
	<div id="char6" class="character number" value="6"></div>
	<div id="char7" class="character number" value="7"></div>
	<div id="char8" class="character number" value="8"></div>
	<div id="char9" class="character number" value="9"></div>
	
	<div id="char11" class="character clock up"></div>
	<div id="char12" class="character clock down"></div>
	<div id="char13" class="character freeze"></div>
</div>
</div>
<div id="message">
</div>

CSS

body {
                cursor: url('img/target.gif');
                background: lightblue;
            }
            #stat span, #stat a {
                text-decoration: none;
                font-size: 28px;
                background: #d3d3d3;
                padding: 2px 10px;
                color: #333333;
                -webkit-border-radius: .2em;
                -moz-border-radius: .2em;
                border-radius: .2em;
                opacity: 0.8;
                filter:alpha(opacity=80);
            }
            
            #stat a:hover {
                background: #999999;
            }
            
			#main-container {
			    height: 436px;
			    width: 836px;
			}
            
            #container {
                background: url("http://thumbs.imagekind.com/member/eb3bcd71-6665-4cbc-8b54-e0163c4174da/uploadedartwork/650X650/016304d7-d6cf-4d38-b82f-ac46eb7f97fa.jpg") repeat scroll right top #FFFFFF;
                border: 5px solid lightblue;
                border-radius: 0.5em 0.5em 0.5em 0.5em;
                cursor: crosshair;
                height: 350px;
                left: 67px;
                margin: 0 auto;
                padding: 20px 50px;
                position: absolute;
                top: 49px;
                width: 600px;
                border: solid 2pt green;
                overflow: hidden;
            }
            
			#message {
			    background: none repeat scroll 0 0 #999999;
			    border: 2px solid #999999;
			    color: white;
			    font-family: arial;
			    font-size: 47px;
			    height: 352px;
			    left: 67px;
			    line-height: 66px;
			    margin: 0 auto;
			    opacity: 0.8;
			    padding: 20px 50px;
			    position: absolute;
			    text-align: center;
			    top: 49px;
			    width: 601px;
			}
			
            .character {
                background-position: center center;
                background-repeat: no-repeat;
                background-size: contain;
               ...

JavaScript

var miss = 0;
var hit = 0;
var attempted = 0;
var count = 60;
window.cont = 300;
window.lastrand = -1;
var check;
var play;
var total = Math.ceil(Math.random() * 10);
var countdown = null;

function createPlusSum(total) {
    console.log(total)
    var int1 = Math.ceil(Math.random() * total);
    var int2 = total - int1;
    $('#target').html(int1 + ' + ' + int2 + ' = ?');
}

function createTakeSum(total) {
    console.log(total)
    var int1 = Math.ceil(Math.random() * total);
    var int2 = total + int1;
    $('#target').html(int2 + ' - ' + int1 + ' = ?');
}

function createSum() {
    total = Math.ceil(Math.random() * 10 -1);
    if (Math.random() > 0.5) {
        createTakeSum(total);
    } else {
        createPlusSum(total)
    }
}

$(document).ready(function () {

    $('#target').hide();
    $('#timer').hide();
    
    function correctlabels() {
		console.log("correctLabels");
        createSum(total);

        $('.character').each(function (index, character) {
            var $this = $(this);

            if (total != parseInt(this.getAttribute("value"))) {
                $this.addClass("wrong");
                $this.removeClass("right");
            } else {
                $this.addClass("right");
                $this.removeClass("wrong");
            }
        });
    }
    $(".game_settings").find('input').click(function () {
    

        switch($(this).attr('class')) {
              case 'easy':
                AnimationSpeed = 9000;
                break;
              case 'medium':
                AnimationSpeed = 7000;
                break;
              case 'hard':
                AnimationSpeed = 5000;
                break;
            }
            startplay();
     });

    //function to start the game
    function timer() {
            if (count == 0) {
                count = 60;
                clearInterval(countdown);
                clearInterval(play);
                //$("#btnstart").bind("click", startplay);
               ...