JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left-icon">
          <img class="right-menu-icons menu-icon" id="help-icon" style="height:auto; width:auto; max-width:70px; max-height:46px;" src="../assets/images/help@2x.png" alt="helpIcon">
        </div>
<div class="rounded-corners" id="help-menu" style="display:none;">
  <div id="help-nav">
    <p> user guide video</p>
    <hr class="hr-line" />
    <p id="contact-help">contact us</p>
  </div>
</div>

CSS

#help-menu{
  width:200px;
  height:100px;
  left:750px;
  position:absolute;
  background-color: black;
  z-index: 50;
}

#help-nav{
  padding-top: 8px;
  text-align: center;
  text-transform: uppercase;
  color:white;
}

.rounded-corners {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
}

JavaScript

$(document).ready(function() {
	

	$(document).on("click", "#help-icon", function() { 
		console.log('hi');
		  		 $("#help-menu").toggle();
		    });

		 
	
	$(document).mouseup(function (e)
		{
		 

		    var hlpcont = $("#help-menu");
			    if (!hlpcont.is(e.target) 
			        && hlpcont.has(e.target).length === 0)
			    {
			      hlpcont.hide(); 
			    }
		 
		

	    });


});