JSFiddle - React, Tailwind, and code Playground

HTML

<div id="showDiv"> show </div>
<div class="toolbarContent">
    Test Div  Test Div    Test Div    Test Div    Test Div
    <br>
            Test Div  Test Div    Test Div    Test Div    Test Div
    <br>
    Test Div  Test Div    Test Div    Test Div    Test Div
    <br>
    Test Div  Test Div    Test Div    Test Div    Test Div
    <br>
    Test Div  Test Div    Test Div    Test Div    Test Div
    <br>
    Test Div  Test Div    Test Div    Test Div    Test Div
    <br>
    Test Div  Test Div    Test Div    Test Div    Test Div
    <br>
    Test Div  Test Div    Test Div    Test Div    Test Div
    <br>

</div>

CSS

.toolbarContent{
background-color:red;
    height:200px;
    width:150px;
    top:100px;
    right:0;
    position:absolute;
    overflow:auto;
    max-height:290px;
}

JavaScript

var $container = $(".toolbarContent");

//Hide red div if we click out side of the red div
$(document).mouseup(function (e) {
        if (!$container.is(e.target) // if the target of the click isn't the container...
            && $container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $container.hide("slow");
        }
    });

$('#showDiv').click(function () {
$container.show();
});