JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" id="one"></div>
<div class="box" id="two"></div>
<div class="box" id="three"></div>
<div id="button">Color Match?</div>

CSS

.box {
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 0;
    background: black;
}
#button {
    width: 100px;
    height: 20px;
    margin: 5px;
    background: #fff;
    border: 1px solid #000;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

JavaScript

(function () {
    "use strict";

    var one = document.getElementById('one'),
        two = document.getElementById('two'),
        three = document.getElementById('three');
    three.addEventListener("click", modifyText, false);

    one.onclick = function () {
        one.style.background = "blue";
    };

    two.onclick = function () {
        two.style.background = "blue";
    };

    three.onclick = function () {
         three.style.background = "red";
    };

    function modifyText() {

        if (one.style.background && two.style.background === "blue") {
            alert("Good Work...");
        }
        if (one.style.background !== two.style.background) {
            alert("Sorry ...");
        }
    }
})();