JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Math Game</h1>

<div class="game-info">
  <p id="level">
    <span id="score"></span>
    <span id="high-score"></span>
  </p>
</div>

<div class="game-block"></div>

<div class="controls"></div>
  
<button class="game-btn" id="new-game" onclick="startGame()">New Game</button>
<button class="game-btn" id="help" onclick="showRules()">How To Play</button>

<div id="game-help">
  <p>In this math game, you are given two expressions.</p>
  <p>Your goal is to compare the two expressions</p>
  <p> If the left expression is greater than the one on the right, press the left button</p>
  <p>If the two expressions are equal, press the equals button</p>
  <p>If the expression on the left is less than the expression on the right, press the right button</p>
</div>

CSS

h1 {
  background: -webkit-linear-gradient(red, yellow);
  background: -o-linear-gradient(red, yellow);
  background: -moz-linear-gradient(red, yellow);
  background: linear-gradient(red, yellow);
  text-align: center;
}

.exp1 {
  float: left;
  width: 15%;
}

.exp2 {
  float: right;
  width: 15%;
}

.game-btn {
  position: fixed;
  padding: 5px 10px;
  color: white;
}

#new-game {
  margin-top: 16%;
  background: blue;
}

#help {
  position: fixed;
  margin-top: 21%;
  color: white;
  background: green;
}

#game-help {
  position: fixed;
  margin-top: 27%;
}

.game-block {
    margin: 16% 0;
}

.game-info {
  position: fixed;
}

.controls {
  position: fixed;
  margin-top: 30px;
}

.greaterThan, .equals, .lessThan {
    margin: 30px 10px;
    padding: 5px 10px;
    color: white;
    font-weight: bold;
}

.greaterThan {
    background: green;
}

.equals {
    background: yellow;
}

.lessThan {
    background: red;
}

#score, #high-score {
  margin-left: 10%;
  font-weight: bold;
}

JavaScript

var gameBlock = document.getElementsByClassName("game-block")[0];
var controls = document.getElementsByClassName("controls")[0];

var gameStart = false;
var score = 0;
var level = 1;
var scores = [0];

var colors = ["red", "orange", "yellow", "green", "lightblue"];
var operators = ["+", "-", "*", "/"];

$("#game-help").hide();

function randEasy() {
		return Math.floor(Math.random() * 10);
}

function randMed() {
		if (Math.random() > 0.5) {
    		return Math.floor(Math.random() * 20);
    }
    else {
    		return Math.floor(Math.random() * -20);
		}
}

function randHard() {
		if (Math.random() > 0.5) {
    		return Math.floor(Math.random() * 100);
    }
    else {
    		return Math.floor(Math.random() * -100);
		}
}

function randExtreme() {
		if (Math.random() > 0.5) {
    		return Math.floor(Math.random() * 1000);
    }
    else {
    		return Math.floor(Math.random() * -1000);
		}
}

function randOperation() {
		return operators[Math.floor(Math.random() * operators.length)];
}

function randColor() {
		return colors[Math.floor(Math.random() * colors.length)];
}

function generateExpressions() {
    var exp1 = document.createElement("div");
    var exp2 = document.createElement("div");
    
    [exp1, exp2].forEach(function(exp,index) {
    		exp.classList.add("exp" + (index + 1));
        exp.style.color = "white";
        exp.style.background = randColor();
        exp.style.textAlign = "center";
        exp.style.padding = "8px 0";
        gameBlock.appendChild(exp);
        
    		if (level == 1) {
    				exp.innerHTML = "" + randEasy() + " + " + randEasy();
        }
        else if (level == 2 || level == 3) {
        		exp.innerHTML = "" + randMed() + " + " + randMed();
        }
        else if (level == 4 || level == 5) {
        		exp.innerHTML = "" + randHard() + " + " + randHard();
        }
        else if (level == 6 || level == 7) {
        		exp.innerHTML = "" + randHard() + randOperation() + randHard();
        }
        else {
       ...