JSFiddle - React, Tailwind, and code Playground

HTML

<div id='uuser'>
    
    click me
</div>

<div  id='uuser_b'>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>free</li>
     </ul>
</div>

CSS

#uuser {
    width: 240px;
    height: 24px;
    border:1px black solid;
}
#uuser_b ul {
    border:1px black solid;
    opacity:0;
}

JavaScript

$(document).click(function(e) {
    if (!$(e.target).is("#uuser_b *, #uuser")) {
         $("#uuser_b > ul").animate({opacity: 0});
    }
});

$("#uuser").click(function() {
    $("#uuser_b > ul").animate({
        opacity: 1
    }, 200);
});