JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div class="link_div">
      <a href="#" class="link">Open box</a>
      <div class="box">
       I am a box
      </div>
    </div>
</div>

CSS

.header{background:#fff; padding:20px}
.link_div{position:relative}
.link{display: inline-block; outline:none; padding:10px; color:black; background:#e1e1e1; box-shadow: -1px -3px 3px 0px rgba(109, 109, 109, 0.2);  }
.box{display:none;background: #8bdeff; padding: 30px; position:absolute; top:40px; left:0}
.active{background:#8bdeff}

JavaScript

$('.link').click(function(e){
e.stopPropagation();
	$(this).toggleClass('active');
	$(".box").slideToggle();
});

$('body').click(function(e) {
	var target = e.target;
	
	// Short-circuit if box is clicked OR
	// link is not active
	if ($(target).is('.box')) return;
	if (!$(".link").hasClass('active')) return
	
	$(".box").slideToggle();
	$(".link").removeClass('active');
});