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();
    });
});