JSFiddle - React, Tailwind, and code Playground

HTML

<div class="interactiveBox">
    <button id="root" onclick="changeColor(this)" data-color="#ff0000"></button>
    <button id="sacral" onclick="changeColor(this)" data-color="orange"></button>
    <button id="solar" onclick="changeColor(this)" data-color="yellow"></button>
    <button id="heart" onclick="changeColor(this)" data-color="green"></button>
    <button id="throat" onclick="changeColor(this)" data-color="blue"></button>
    <button id="third" onclick="changeColor(this)" data-color="purple"></button>
    <button id="crown" onclick="changeColor(this)" data-color="white"></button>
</div>
<script type="text/javascript">
    function changeColor(obj) {
        //reset other buttons
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].style.backgroundColor = "#000000";
        }
        obj.style.backgroundColor = obj.getAttribute('data-color');
        if (obj.id == "root") {
            setTimeout(changeAllcolors, 2000);
        }
    }

    function changeAllcolors() {
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            var color = buttons[i].getAttribute('data-color');
            buttons[i].style.backgroundColor = color;
        }
    }
</script>

CSS

button {
    background-color:black;
}
#root {
    position: absolute;
    top: 70%;
    left: 50%;
    height: 40px;
    width: 40px;
    margin-top: 75px;
    margin-left: -35px;
    border-style: solid;
    border-radius: 50%;
}
#sacral {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    ;
    top: 70%;
    left: 50%;
    /* Play with these numbers to see what it does */
    ;
    height: 40px;
    width: 40px;
    margin-top: 15px;
    margin-left: -35px;
    border-style: solid;
    border-radius: 50%;
}
#solar {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    ;
    top: 70%;
    left: 50%;
    /* Play with these numbers to see what it does */
    ;
    height: 40px;
    width: 40px;
    margin-top: -50px;
    margin-left: -35px;
    border-style: solid;
    border-radius: 50%;
}
#heart {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    ;
    top: 70%;
    left: 50%;
    /* Play with these numbers to see what it does */
    ;
    height: 40px;
    width: 40px;
    margin-top: -115px;
    margin-left: -35px;
    border-style: solid;
    border-radius: 50%;
}
#throat {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    ;
    top: 70%;
    left: 50%;
    /* Play with these numbers to see what it does */
    ;
    height: 40px;
    width: 40px;
    margin-top: -200px;
    margin-left: -35px;
    border-style: solid;
    border-radius: 50%;
}
#third {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    ;
    top: 70%;
    left: 50%;
    /* Play with these numbers to see what it does */
    ;
    height: 40px;
    width: 40px;
    margin-top: -275px;
    margin-left: -35px;
    border-style: solid;
   ...