JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<div class="parent">
    <div class="child">
        <div class="middle"></div>
    </div>
</div>

CSS

div {
    max-width: 100px;
    min-width: 20px;
    min-height: 20px;
    padding: 20px;
}

.parent {
    background-color: #A0B6E7;
}

.child {
    background-color: #ADA0E7;
}

.middle {
    background-color: #D1A0E7;
}

JavaScript

var parent = document.querySelector('.parent'),
    child = document.querySelector('.child'),
    middle = document.querySelector('.middle');

function showCurrent(name, el) {
    var bgColor = el.style.backgroundColor;
    el.style.backgroundColor = 'red';
    alert(name);
    el.style.backgroundColor = bgColor;    
}

parent.addEventListener('click', function (e) {
    showCurrent('Parent', this);        
}, false);

child.addEventListener('click', function (e) {
    showCurrent('Middle', this);
}, false);

middle.addEventListener('click', function (e) {
    showCurrent('Child', this);
}, false);