JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" id="MyNumber" value="" />
    <button id="getit">Play</button>
</form>
<ul id="randomnumber">
</ul>

<p>Hits: <span id="hitcount">0</span> | Misses: <span id="misscount">0</span></p>

CSS

#randomnumber {
    overflow: hidden;
    margin: 20px 0;
}

#randomnumber li {
    font-size: 16px;
    width: 90px;
    height: 90px;
    float: left;
    text-align: center;
    line-height: 85px;
    margin-right: 10px;
    background-color: #efefef;
    cursor: pointer;
}

#randomnumber li:hover {
    background-color: #666;
    color: white;
}

#randomnumber li.clicked {
    color: black;
    cursor: default;
}

#randomnumber li.correct {
    background-color: #C9FF7A;
}

#randomnumber li.wrong {
    background-color: #FF7C7A;
}

JavaScript

var hitCount = 0,
    missCount = 0;

function IsNumeric(n) {
    return !isNaN(n);
}

$("#getit").click(function() {
    var li = [],
        intervals = 0,
        n = parseInt($('#MyNumber').val());

    if (IsNumeric(n)) {
        setInterval(function() {
            li[intervals++ % li.length].text(Math.random() > .1 ? Math.floor(Math.random() * (10 + n) + (n / 2)) : n).attr('class', '');
        }, 500);
    }

    $('#randomnumber').empty();

    for (var i = 0; i < 5; i++) {
        li.push($('<li />').click(function() {
            var $this = $(this);

            if (!$this.hasClass('clicked')) {
                if (parseInt($this.text(), 10) === n) {
                    $this.addClass('correct');
                    $('#hitcount').text(++hitCount);
                } else {
                    $this.addClass('wrong');
                    $('#misscount').text(++missCount);
                }
            }

            $this.addClass('clicked');
        }).appendTo('#randomnumber'));
    }

    return false;
});