JSFiddle - React, Tailwind, and code Playground

HTML

<body>

        <h1 id="header">freeCodeCamp JS Simon Game</h1>

	    <div id="box">
            <div class="pad" id="topLeft"></div>
            <div class="pad" id="topRight"></div>
            <div class="pad" id="bottomLeft"></div>
            <div class="pad" id="bottomRight"></div>

		</div>

    </body>

CSS

body {
    //text-align: center;
}

#box {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    position: relative;
    margin: auto;
    background-color: #333;
    top: 10vh;
    box-shadow: 0px 0px 12px #222;
}

.pad {
    width: 240px;
    height: 240px;
    float: left;
    left: 0px;
    border: 5px solid #333;
    box-shadow: 0px 0px 2px #222;
    display: inline-block;
    position: relative;
}

#topLeft {
    background-color: green;
    border-top-left-radius: 100%;
}

#topRight {
    background-color: red;
    border-top-right-radius: 100%;
    /*right: 0;*/
}

#bottomLeft {
    background-color: yellow;
    border-bottom-left-radius: 100%;
}

#bottomRight {
    background-color: blue;
    border-bottom-right-radius: 100%;
}