JSFiddle - React, Tailwind, and code Playground

by Abhimanyu Pathania

HTML

<div id="one">1
    <div id="two">2
        <div id="three">3</div>
    </div>
</div>

CSS

#one {
    width:300px;
    height:300px;
    margin:50px;
    border: 1px solid black;
    background-color:red;
    text-align:center;
}
#two {
    width:200px;
    height:200px;
    margin:25px auto;
    border: 1px solid black;
    background-color:green;
}
#three {
    width:100px;
    height:100px;
    margin:25px auto;
    border: 1px solid black;
    background-color:blue;
}

JavaScript

var divs = document.querySelectorAll("div");

function feedBack(e) {

    //alert(this.id + ": " + this.style.backgroundColor)
    //alert("this: " + this.id + "\n" + "Target: " + e.target.id);
    //e.stopPropagation();

}
for (var i = 0, l = divs.length; i < l; i++) {

    divs[i].addEventListener("click", feedBack, false);

}