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">
        </div>
        <div class="pad shape2" data-pad="2">
        </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">
        </div>
        <div class="pad shape4" data-pad="4">
        </div>
    </div>
    <div class="wrapper3">
        <div class="level">
            	<h2>Level: 1</h2>

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

        </div>
            <div class="sButton">
                <button class="start">start</button>
            </div>

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 {
   ...

JavaScript

var game = { //game object
    duration: 10,
    maxDuration: 10,
    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;

    },
incrementTimer: function(timeout)
    {
        setTimeout(function ()
    {
        var $timer = $('.Timer').first().show(),
            duration = $timer.data('duration');
            
        
        if (duration === undefined || duration < 0)
            duration = game.maxDuration;

        $timer.html('<br /><br /><br />' + duration);
        $timer.data('duration', --duration);

        if (duration > -1) {
            game.incrementTimer(1000);
        }
        else {
            game.level++;
            if(game.level % 5 == 0)
                game.duration += 5;
            
            game.maxDuration = game.duration;
            $timer.html('<br /><br /><p>Get Ready your time starts when you click start</p>');
            $('.level h2').text('Level: ' + game.level);
            $('.difficulty').show();
            $('.start').show();
 ...