JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="c1" class="blocks">
        <hr/>
        <p id="hex">#1998ff
            <br/>(this is the broken one)</p>
    </div>
    <div id="c2" class="blocks">
        <hr/>
        <p id="hex">#1ff</p>
    </div>
    <div id="c3" class="blocks">
        <hr/>
        <p id="hex">#86E2D5</p>
    </div>
    <div id="c4" class="blocks">
        <hr/>
        <p id="hex">#26A65B</p>
    </div>
    <div id="c5" class="blocks">
        <hr/>
        <p id="hex">#EB974E</p>
    </div>
    <div id="c6" class="blocks">
        <hr/>
        <p id="hex">#EF4836</p>
    </div>
    <div id="c7" class="blocks">
        <hr/>
        <p id="hex">#9B59B6</p>
    </div>
</body>

CSS

body {
    -webkit-user-select: none;
    cursor: default;
    outline-width: 0px;
    background-color: grey;
}

.blocks {
    -webkit-transition: 0.5s;
    transform: scale3d(1, 1, 1);
    display: block;
    width: 180px;
    height: 180px;
    margin: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    float: left;
    font-family: cursive;
    background-color: #DADFE1;
}

div:hover {
    transform: scale3d(1.07, 1.07, 1.07);
}

.blocks {
    cursor: pointer;
}

#c1:hover {
    background-color: #1998ff;
}

#c2:hover {
    background-color: #1ff;
}

#c3:hover {
    background-color: #86E2D5;
}

#c4:hover {
    background-color: #26A65B;
}

#c5:hover {
    background-color: #EB974E;
}

#c6:hover {
    background-color: #EF4836;
}

#c7:hover {
    background-color: #9B59B6;
}

#c1:before,
#c2:before,
#c3:before,
#c4:before,
#c5:before,
#c6:before,
#c7:before {
    content: "Color";
}

#hex {
    color: #F9BF3B;
}

p {
    -webkit-user-select: text;
    cursor: text;
}

JavaScript

var D = document;
var C1 = D.getElementById("c1"),
    C2 = D.getElementById("c2"),
    C3 = D.getElementById("c3"),
    C4 = D.getElementById("c4"),
    C5 = D.getElementById("c5"),
    C6 = D.getElementById("c6");

$(C1).click(function() {
    $(C1).css("transform", "rotateY(-180deg)");
    setTimeout(function() {
        $(C1).css("transform", "");
    }, 1500);
});