JSFiddle - React, Tailwind, and code Playground

by Leandro Amorim

HTML

<div id="item"> <span id="span1">Teste 1</span>

    <br />
    <br /> <span id="span2">Teste 2</span>

    <br />
    <br /> <span id="span3">
        Teste 3
        <span id="span3_span1">
            Teste 3.1
        </span>
</span>
    <br />
    <br />
</div>

CSS

html {
    margin:0;
    padding:0;
    height:100%;
}
body {
    padding:0;
    margin:0;
    height:100%;
    background-color:#002884;
}
#item {
    background-color:black;
    position: absolute;
    top: 20%;
    left: 50%;
    height: 180px;
    width: 50%;
    margin: 0 0 0 -25%;
}
#item span {
    width: 100%;
    background-color:#FFF;
    color:#000;
    display: block;
}

JavaScript

$(function () {
    $(document).on("click", function (e) {
        var obj = 'item',
            id = $(e.target).attr('id');
        if (id == obj) return;
        if ($("#" + obj + " #" + id).length > 0) return;
        $("#" + obj).hide();
    });
    $("#span3").on("click", function () {
        alert("span3");
    });
    $("#span3_span1").on("click", function () {
        alert("span3_span1");
    });
});