JSFiddle - React, Tailwind, and code Playground

by Mojahed Elbakre

HTML

<html>
<body>
  <div class="applicationTrigger appbtn">
    <i class="so-icon"></i>
    Click Me
  </div>
  <div class="app-drop">Target Div</div>
</body>
</html>

JavaScript

const button = document.getElementsByClassName('applicationTrigger')[0];
const target = document.getElementsByClassName('app-drop')[0];
target.style.display = 'none';
button.addEventListener('click', (e) => {
e.stopPropagation();
	target.style.display = 'block';
});
document.addEventListener('click', (e) => {
    const clickedTarget = e.target;
    if (clickedTarget !== button && clickedTarget !== target) {
        // hide code
        target.style.display = 'none';
    }
});