JSFiddle - React, Tailwind, and code Playground

HTML

<span class="title-label">designed and coded by <a href="http://www.daveingles.com" id="linkedIn" target="_blank">Dave Cook</a></span>
      </div>
<div class="main">

  <div class="button-holder">


    <div class="quarter red">
      <div id="red"></div>
    </div>
    <!--quarter red-->
    <div class="quarter yellow">
      <div id="yellow"></div>
    </div>
    <!--quarter red-->
    <div class="quarter green">
      <div id="green"></div>
    </div>
    <!--quarter red-->
    <div class="quarter blue">
      <div id="blue"></div>
    </div>
    <!--quarter red-->
    <div class="center">
      <h1 id="simon">Simon</h1>
      <div class="center-row">
        <div class="center-cell">
          <div class="screen">--</div>
        </div><!--cell-->
        <div class="center-cell">
          <div class="btn r"></div>
          </div><!--cell-->
        <div class="center-cell">
          <div id="strict-light"></div>
        <div class="btn y"></div>
          </div><!--cell-->
        <div class="center-cell">
            <span>COUNT</span>
          </div><!--cell-->
        <div class="center-cell">
       <span> START</span>
          </div><!--cell-->
        <div class="center-cell">
        <span>STRICT</span>
          </div><!--cell-->
        
      </div><!--center-row-->
      <div class="bottom-row">
        <div class="center-cell">
          <span>OFF</span>
        </div>
        <div class="center-cell">
          <div class="off-on">
            <div id="switch"></div>
          </div>
        </div>
        <div class="center-cell">
          <span>ON</span>
        </div>
      </div><!--bottom-row-->

    </div>
    <!--center-->
  </div>
  <!--button-holder-->
</div>
<!--main-->

CSS

@import url('https://fonts.googleapis.com/css?family=Patua+One');
a {
  text-decoration:none;
  color:blue;
}
a:hover {
  font-weight:bold;
  color:green;
}
.title-label{
  font-family:Patua One;
  float:right;
}
.main {
  z-index:-3;
  height:40em;
  width:40em;
  background-color:black;
  margin:auto;
  border-radius:50%;
  position:relative;
  -webkit-box-shadow: 2px 2px 26px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 26px 5px rgba(0,0,0,0.75);
box-shadow: 2px 2px 26px 5px rgba(0,0,0,0.75);
}
.button-holder {
  z-index:-2;
  margin:auto;
  position:relative;
  width:90%;
  height:90%;
  border:1px solid transparent;
  top:5%;
}
.quarter {
  z-index:-2;
  width:44.3%;
  height:44.3%;
  margin:auto;
  border:1px solid black;
  float: left;
  position:relative;
}
.center{
  z-index:-1;
  margin:auto;
  position:relative;
  height:45%;
  width:45%;
  background-color:#efefef;
  border:2em solid black;
  top:25%;
  border-radius:100%;
}

.red{
  background-color:red;
  border-radius:100% 0px 0px;  
  border:1em solid black;
}
.yellow {
  background-color:yellow;
  border-radius:0px 100% 0px 0px;  
  border:1em solid black;
}
.green {
  background-color:green;
  border-radius:0px 0px 0px 100%;
  border:1em solid black;
}
.blue {
  background-color:blue;
  border-radius:0px 0px 100% 0px;
  border:1em solid black;
}
.glow{
  height:100%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  opacity:0.3;
  border-radius:inherit;
}


#simon {
  position:absolute;
  margin-top:0.5em;
  margin-left:0.6em;
  font-size:4em;
  font-family: 'Patua One', cursive;
}

.screen {  
  height:1.5em;
  width:2.8em;
  margin-left:0.4em;
  background-color:black;
  color:red;
  text-align:center;
  font-size:1.5em;
  line-height:1.5em;
  border:2px solid;
  border-style:inset;
}
.btn {
  width:1.2em;
  height:1.2em;
  border:0.3em solid #000;
  border-radius:100%;
  position:absolute;
  margin:0em 0em 0em 1.9em;  
  bottom:1.5em;
 ...

JavaScript

var sounds = {
  red: new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"),
  yellow:new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"),
  green:new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"),
  blue:new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3")
}

function activateSection(color) {
  var idColor = "#"+color
  $(idColor).addClass("glow");
  sounds[color].play();
  setTimeout(function(){
    $(idColor).removeClass("glow");
  },200);
}

$("*").click(function(){
  console.log($(this));
  activateSection("red");
});

$("#yellow").click(function(){
  console.log($(this));
  activateSection("yellow");
});