JSFiddle - React, Tailwind, and code Playground

by Rohan Thakral

HTML

<div class = "wrapper">

	<div id = "square" class = "square" onclick = "beginScript()"></div><br />
	<p id = "begin" class = "fontStyle">click the square to begin!</p>
	<div id = "squarePos">
	
		<div id = "sq1" class = "square" onclick = "fncSq1()"></div>		
		<div id = "sq2" class = "square" onclick = "fncSq2()"></div>		
		<div id = "sq3" class = "square" onclick = "fncSq3()"></div>		
		<div id = "sq4" class = "square" onclick = "fncSq4()"></div>
		
	</div>	
</div>

CSS

div.wrapper {
	width: 800px;
	height: 800px;
	margin: 20px auto;
}

.fontStyle {
	font-family: "Lucida Console", Monospace;
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	text-transform: capitalize;	
	vertical-align: middle;
}

p#begin {
	opacity: 0;
}

div.square {
	font-family: "Courier New", Monospace;
	display: flex;
	color: white;
	border: 5px solid #ffaa00;
	height: 190px;
	width: 190px;
	justify-content: center;
	align-items: center;
	background-color: #ffaa00;
	opacity: 0;
	margin: auto;
	cursor: pointer;
}

#squarePos {
	position: fixed;
}

.square:hover {
	background-color: #ffcc00;
	border-color: #ffcc00;
}
.square:active {
	background-color: #ff8800;
	border-color: #ff8800;
}

.removeLinkEffect:hover, .removeLinkEffect:active {
	background-color: #ffaa00;
	border-color: #ffaa00;
	cursor: default;
}

JavaScript

(function (d) {		//* the following script is taken from the source = http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor
    d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
        d.fx.step[e] = function (g) {
            if (!g.colorInit) {
                g.start = c(g.elem, e);
                g.end = b(g.end);
                g.colorInit = true
            }
            g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
        }
    });

    function b(f) {
        var e;
        if (f && f.constructor == Array && f.length == 3) {
            return f
        }
        if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
            return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
        }
        if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
            return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
        }
        if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
            return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
        }
        if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
            return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
        }
        if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
            return a.transparent
        }
        return a[d.trim(f).toLowerCase()]
    }
    function c(g, e) {
        var f;
        do {
            f = d.css(g, e);
            if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
     ...