JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="wrapper">
        <center>
            <h3>Demo Bomb Expert Brain Game</h3>
        </center>
    </div>
    <div class="wrapper2">
        <div class="pad shape1" data-pad="1">
            <audio preload="auto" class="sound1">
                <source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg" />
                <source src="sounds/ogg/sounds_01.ogg" type="audio/ogg" />
            </audio>
        </div>
        <div class="pad shape2" data-pad="2">
            <audio preload="auto" class="sound2">
                <source src="sounds/mp3/sounds_02.mp3" type="audio/mpeg" />
                <source src="sounds/ogg/sounds_02.ogg" type="audio/ogg" />
            </audio>
        </div>
        <div class="Timer">
            <br />
            <br />
            <p>Get Ready your time starts when you click start</P>
        </div>
        <div class="pad shape3" data-pad="3">
            <audio preload="auto" class="sound3">
                <source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg" />
                <source src="sounds/ogg/sounds_03.ogg" type="audio/ogg" />
            </audio>
        </div>
        <div class="pad shape4" data-pad="4">
            <audio preload="auto" class="sound4">
                <source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg" />
                <source src="sounds/ogg/sounds_04.ogg" type="audio/ogg" />
            </audio>
        </div>
    </div>
    <div class="wrapper3">
        <div class="level">
            	<h2>Level: 1</h2>

        </div>
        <div class="score">
            	<h2>Score: 0</h2>

        </div>
        <ul class="difficulty">
            <li>
                <input type="radio" class="difOpt" name="difficulty" value="2">Easy</li>
            <li>
                <input type="radio" class="difOpt" name="difficulty" value="1" checked>Normal</li>
            <li>
                <input type="radio" class="difOpt" name="difficulty" value="0.5">Hard</li>
           ...

CSS

body {
  background-color: #333;
  color: #fff;
}

ul {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
  padding: 3px;
}

.wrapper {
  margin-top:10px;
  margin-bottom:20px;
  width: 650px;
  height: 50px;
  background-color:black;
  position: relative;
  margin: 0 auto;
  border-style: solid;
  border-width: 5px;
}

.wrapper2 {
  position: relative;
  width: 650px;
  height: 700px;
  margin: 0 auto;
  border-style: solid;
  border-width: 5px;
}

.wrapper3{
  position: relative;
  margin-top:20px;
  width: 650px;
  height: 170px;
  margin: 0 auto;
  background-color:black;
  border-style: solid;
  border-width: 5px;
}

.Timer{
  width:300px;
  height:200px;
  margin-top:235px;
  margin-left:177px;
  border:5px solid white;
  border-radius: 50%;
  background-color:black;
  text-align:center;
}

.pad {
  z-index: 1;
  margin: 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
}

.shape1 {
  position: absolute;
  left: 50%;
  margin-left: -50px;
  width: 125px;
  height: 125px;
  background-color: green;
  border-radius: 50%;
}

.shape2 {
  position: absolute;
  left: 50%;
  bottom: 2.5px;
  margin-left: -50px;
  width: 125px;
  height: 125px;
  background-color: red;
  border-radius: 50%;
}

.shape3 {
  position: absolute;
  left: 78%;
  right: 50%;
  bottom: 50%;
  margin-bottom: -50px;
  margin-right: -50px;
  width: 125px;
  height: 125px;
  background-color: purple;
  border-radius: 50%;
}

.shape4 {
  position: absolute;
  left: 0;
  bottom: 50%;
  margin-bottom: -50px;
  width: 125px;
  height: 125px;
  background-color: blue;
  border-radius: 50%;
}

.level, .score {
  width: 50%;
  float: left;
  text-align: center;
}

.sButton {
  width: 30%;
  margin: 0 auto;
}

.start {
  width: 100%;
  height: 30px;
  text-align: center;
}

JavaScript

var game = { //game object
    level: 1, //current level
    turn: 0, //current turn
    difficulty: 1, // user difficulty
    score: 0, //current score
    active: false, //whether a turn is active or not
    handler: false, // whether the click and sound handlers are active
    shape: '.shape', // cached string for the pad class
    genSequence: [], //array containing the generated/randomized pads
    plaSequence: [], //array containing the users pad selections

    init: function () { //initialises the game
        if (this.handler === false) { //checks to see if handlers are already active
            this.initPadHandler(); //if not activate them
        }
        this.newGame(); //reset the game defaults

    },

    initPadHandler: function () {

        that = this;

        $('.pad').on('mouseup', function () {

            if (that.active === true) {

                var pad = parseInt($(this).data('pad'), 10);

                that.flash($(this), 1, 300, pad);

                that.logPlayerSequence(pad);

            }
        });

        this.handler = true;

    },

    newGame: function () { //resets the game and generates a starts a new level

        this.level = 1;
        this.score = 0;
        this.newLevel();
        this.displayLevel();
        this.displayScore();

        //initialize timer to 10 seconds (10.0)
        this.timer = 10;

    },

    newLevel: function () {

        this.genSequence.length = 0;
        this.plaSequence.length = 0;
        this.pos = 0;
        this.turn = 0;
        this.active = true;

        this.randomizePad(this.level); //randomize pad with the correct amount of numbers for this level
        this.displaySequence(); //show the user the sequence
    },

    flash: function (element, times, speed, pad) { //function to make the pads appear to flash

        var that = this; //cache this

        if (times > 0) { //make sure we are supposed to flash
            that.playSound(pad); //play the corresponding...