JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="simonDevice">
        <div id="buttons">
            <div class="colors" id="yellow">yellow</div>
            <div class="colors" id="blue">blue</div>
            <div class="controls">
                <div id="levelDisplayer">
                    <p></p>
                </div>
                <button id="start">Start</button>
                <button id="strictMode">Strict</button>
                <button id="simon">Simon ON/OFF</button>
            </div>
            <div class="colors" id="red">red</div>
            <div class="colors" id="green">green</div>
        </div>
    </div>

CSS

body {
    background-color: white;
}

#yellow {
    background-color: hsl(60, 100%, 50%);
}

#blue {
    background-color: hsl(240, 100%, 50%);
}

#red {
    background-color: hsl(0, 100%, 50%);
}

#green {
    background-color: hsl(120, 100%, 50%);
}

.colors {
    height: 90px;
    width: 120px;
    text-align: center;
    font-size: 20px;
    opacity: 0.6;
}

.colors:active,
.active {
    opacity: 1.0;
}

p {
    color: white;
    font-size: 40px;
}

JavaScript

$(document).ready(function () {
    var simon = {
        state: "off",
        strictState: false,
        difficulty: {
            1: "15seg",
            2: "10seg",
            3: "7seg",
            4: "5seg"
        },
        currentLevel: "",
        changeState: function () {
            return this.state == "off"? this.state = "on": this.state = off
        },
        colors: ['red', 'blue', 'green', 'yellow'],
        patternGenerator: function() {
            return this.colors[Math.floor(Math.random()* this.colors.length)]
        },
    };
    var $redButton = $("#red"), $blueButton = $("#blue"), $yellowButton = $("#yellow"),
     $greenButton = $("#green"), $displayerSelector = $('levelDisplayer p'),
     $startButton = $('#start'), $strictButton = $('#strictMode'),
     $colorClass = $(".colors");//selectors
     var onFocus, inputTime, colorPattern = [], userPattern = [];
     $colorClass.prop("disabled", true);
    function itMatch(boolean) {
        var len = userPattern.length;
        if (boolean) { //check if it has the same 
            len = colorPattern.length
        }
        for (var index = 0; index < len; index++) {
            if (colorPattern[index] !== userPattern[index]) {
                return false;
            }
        }
        return true;
    }
    function displayButton(colors, sec) {
        console.log("displayButton fun");
        $colorClass.prop("disabled", true);
        for (var index = 0, len = colors.length; index < len; index++) {
            var color = colors[index];
            onfocus = setTimeout(function () {
                $("#" + color).toggleClass("active");
            }, sec * 1000);
            setTimeout(function() {
                $("#" + color).toggleClass("active");
                $colorClass.prop("disabled", false);
            }, sec * 1500);
        }
    }
    function restart() {
        $displayerSelector.text("__");  
        userPattern = [];
        colorPattern = [];
       ...