JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ChatToggle">ChatToggle</div>
<div id="ChatContainer">ChatContainer</div>

CSS

#ChatToggle{
    cursor: pointer;
}
#ChatContainer{
    display: none;
    width: 100px;
    height: 50px;
    background: red;
}

JavaScript

$(document).on('click', function(e){
    if ($(e.target).closest("#ChatContainer").length === 0) {
        $('#ChatContainer').hide('slow');
    }
});
$('#ChatToggle').click(function(e){
    $('#ChatContainer').toggle('slow');
    e.stopPropagation();
});