JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>MathMan</title>
<body>
    <div id="bg"></div>
    <div id="title">M.A.T.H.M.A.N.</div>
    <div class="button" id="How-to">How-To Play</div>
    <div class="button" id="Play">Begin</div>
    <div class="button" id="Back">Back</div>
    <div class="button" id="Play_Again">Play Again</div>
    <div class="button" id="Bonus_Level">Bonus Level</div>
    <div class="button" id="Play_Again2">Play Again</div>
    <div id="rules">R.U.L.E.S.</div>
    <ol>
        <li>A hidden equation will be given. Your objective is to guess the digits of the <br />equation.</li>
        <li>Beware! Each mistake will result in more and more
            suffocation (and ultimately <br />death) for a computer animated figure called ScienceMan! You have 4 tries (face, arms, body and legs) to get the equation right.</li>
        <li>Be MathMan and save ScienceMan!</li>
    </ol>
    <div id="notes">Notes:
        <br />1. Results of divisions are <br />rounded up.
        <br />2. In case of negative <br />results, absolute value is <br />chosen.
    </div>
    <div id="equation"></div>
    <form name="EntryForm">Enter a number:
        <input type="text" name="EntryForm" />
    </form>
    <div id="button2">Enter</div>
    <div id="image"></div>
    <div id="wentries">Wrong Entries:
        <br />
    </div>
    <div id="status">Status:
        <br />
        <div id="misses">4 misses left</div>
    </div>
    <div id="int">Enter a single digit integer</div>
    <div id="gif1"></div>
    <div id="gif2"></div>
    
</body>

CSS

#bg {
    position: fixed;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    background-color: #000000;
    outline: 20px solid red;
    /* Preserve aspet ratio */
    min-width: 90%;
    min-height: 89%;
}
#target {
    display: none;
    color: red;
    position: absolute;
    top: 100px;
    left: 250px;
}
#title {
    font-family:"Courier New", Courier, monospace;
    font-size: 50px;
    position: relative;
    text-align: center;
    font-weight: bold;
    /*left: 300px;*/
    /* top: 70px; */
    top: -10 px;
    color: white;
}
#rules {
    font-family:"Courier New", Courier, monospace;
    font-size: 50px;
    position: absolute;
    text-align: center;
    font-weight: bold;
    top: 40px;
    left: 175px;
    color: red;
    opacity: 0;
}
.button {
    -webkit-border-radius: 7;
    -moz-border-radius: 7;
    border-radius: 7px;
    font-family:"Courier New", Courier, monospace;
    color: #ffffff;
    font-size: 20px;
    background: #ff0000;
    padding: 15px 25px 15px 25px;
    text-decoration: none;
    font-weight: bold;
}
.button:hover {
    background: #fc3c3c;
    background-image: -webkit-linear-gradient(top, #fc3c3c, #ff002b);
    background-image: -moz-linear-gradient(top, #fc3c3c, #ff002b);
    background-image: -ms-linear-gradient(top, #fc3c3c, #ff002b);
    background-image: -o-linear-gradient(top, #fc3c3c, #ff002b);
    background-image: linear-gradient(to bottom, #fc3c3c, #ff002b);
    text-decoration: none;
}
#How-to {
    position: absolute;
    top: 175px;
    left: 160px;
    opacity: 0;
}
#Play {
    position: absolute;
    top: 175px;
    left: 360px;
    opacity: 0;
}
#Play_Again {
    position: absolute;
    top: 260px;
    left: 200px;
    display: none;
}

#Play_Again2 {
    position: absolute;
    top: 260px;
    left: 200px;
    display: none;
}

#Bonus_Level {
    position: absolute;
    top: 260px;
    left: 420px;
    display: none;
}

#Back {
    position: absolute;
    top: 260px;
    left: 55px;
   ...

JavaScript

$(document).ready(function () {
    begin_animate(); //First Look animation
    //Functions called on the clicks of certain buttons
    $("#How-to").click(function () {
        howto_click();
    });
    $("#Back").click(function () {
        back_click();
    });
    $("#Play").click(function () {
        play_click();
        game();
    });
    $("#Play_Again").click(function () {
        reset();
        game();
    });
    $("#Bonus_Level").click(function () {
        reset();
        bonusgame();
    });
    $("#Play_Again2").click(function () {
        reset();
        bonusgame();
    });
});

var random_operator = [{
    operation: "+",
    result: function (a, b) {
        return a + b;
    }
}, {
    operation: "-",
    result: function (a, b) {
        return a - b;
    }
}, {
    operation: "*",
    result: function (a, b) {
        return a * b;
    }
}, {
    operation: "/",
    result: function (a, b) {
        return Math.round(a / b);
    }
}]; //Object to generate random operators and their results


function begin_animate() {
//Function that cause the beginning animation    
    $("#title").animate({
        top: "+=100px"
    }, 2000);
    $("#How-to").animate({
        opacity: 1
    }, 2000);
    $("#Play").animate({
        opacity: 1
    }, 2000);
}

function play_click() {
//Funtion to make elements disappear on pressing "Begin" button   
    $("#How-to").css("display", "none");
    $("#title").css("display", "none");
    $("#Play").css("display", "none");
}

function howto_click() {
//Funtion to make the How-To Play page appear
    $("#How-to").css("display", "none");
    $("#title").css("display", "none");
    $("#Play").css("display", "none");
    $("#Back").animate({
        opacity: 1
    }, 500);
    $("#rules").animate({
        opacity: 1
    }, 500);
    $("ol").css("display", "block");
    $("#gif2").css({display: "block"});
}

function back_click() {
//Function to respond to clicking the "Back" button in all case scenarios
   ...