JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>


<html>
    <head>
        <title>Reaction Tester</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <div id="pageWrapper">
       
       
       
       
        <div id='box'>
            
        </div> <!-- mainBox -->
        
        <div id="centerDiv">
            <button id='start'>Play</button>
             <div id='score'></div>
        </div>
        
       
        
        </div> <!-- pageWrapper -->
        
                <script src='script.js'></script>

    </body>
    
    
</html>

CSS

* {
    font-family: sans-serif;
       font-weight: 800;
}

body {
    margin: -15px;
    padding: 0;
}

#box {
    width: 100%;
    height: 800px;
    background-color: snow;
    border: 2px solid black;
    position: relative;
    top: -20px;
    margin: 0 auto;
}

#pageWrapper {
    height: 100%;
    width: 100%;
    margin: 0px;
}

#score {
    width: 250px;
    padding: 20x; 10px 10px 10px
    height: 30px;
    visibility: hidden;
    z-index: 20px;
    text-align: center;
    position: relative;
    left: -90px;
    margin-top: 10px;
}

#start {
    z-index: 20;

}


button {
    border: solid 1px black;
    padding: 5px;
    text-align: center;
    width: 80px;
    height: 30px;
    background-color: snow;
}

#centerDiv {
    margin: 0 auto;
    height: 50px;
    width: 50px;
    position: relative;
    top: -600px;
    visibility: visible;
}

JavaScript

var score = 0;
var playing = false;

var randomColor = '#0000';

var addScore = function () {
    // add milisecond every milisecond
    if (playing) {
        setInterval(function () {
            score += 10;
        }, 10)
    }
};

var colorArray = ['#2ecc71', '#e74c3c', '#f1c40f', '#34495e', '#2980b9', '#8e44ad', '#95a5a6', '#16a085'];


document.getElementById('start').onclick = function () 
{
     score = 0;
    if (!playing) 
    {
        this.style.visibility = 'hidden';
        document.getElementById('centerDiv').style.visibility = 'hidden';
        document.getElementById('score').style.visibility = 'hidden';
        document.getElementById('start').style.visibility = 'hidden';

        document.getElementById('box').style.backgroundColor = colorArray[Math.floor((Math.random() * colorArray.length))];
      
        setTimeout(function () 
                   {
            document.getElementById('box').style.visibility = "visible";
        }, Math.random() * 3000);
        playing = true;
        addScore();
    }
};


document.getElementById('box').onclick = function () 
{
    if (playing) 
    {
        playing = false;
        score = (score / 1000);
        document.getElementById('score').innerHTML = score + ' seconds';
        document.getElementById('score').style.visibility = 'visible';
        document.getElementById('start').style.visibility = 'visible';
        document.getElementById('centerDiv').style.visibility = 'visible';
    }
};