JSFiddle - React, Tailwind, and code Playground

by yeti777937

HTML

<div class="element1">elememt1
    <div class="element2">element2
        <div class="element3">element3</div>
    </div>     
</div>

CSS

.element1{
width:500px;
height:300px;
background-color: yellow;
position:absolute;
}


.element1 .element2{
width:400px;
height:200px;
background-color:green ;
position:relative;
top:50px;
left:50px;
}


.element3{
 width:300px;
 height:100px;
 background-color: white;
 position: relative;
 top:40px;
 left: 40px;
  
  
  
}

JavaScript

var element1 = document.getElementsByClassName("element1")[0];
var element2 = document.getElementsByClassName("element2")[0];
var element3 = document.getElementsByClassName("element3")[0];

var elemf = function(event){
    console.log(event);
}

element1.addEventListener("click", elemf)
element2.addEventListener("click", elemf)
element3.addEventListener("click", elemf)