JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div id="1">
    <div id="2">
        <input type="text"></input>
        <button>x</button>
    </div>
</div>

CSS

div {
    height: 300px;
    width: 300px;
    background-color: red;
}
div > div {
    height: 200px;
    width: 200px;
    background-color: blue;
}

JavaScript

$("#1").click(function(){
    alert("1");
});
$("button").click(function(event){
    event.stopPropagation();
    alert("button");
});
$("#2").click(function(event){
    event.stopPropagation();
    alert("2");
});
$("input").focus(function(event){
    event.stopPropagation();
    alert("input");
});