JSFiddle - React, Tailwind, and code Playground

HTML

<input class="menu-btn" type="checkbox" id="menu-btn" />
<ul class="menu" id="menu">
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Listings</a></li>
					<li><a href="#">Testimonials</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Projects</a></li>
					<li><a href="#">Contact</a></li>
				</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSS

.menu {
  background-color: #000;
}

JavaScript

$(document).ready(function() {
	$(document).click(function(event) {
	    if(!$(event.target).closest('.menu').length) {
			if ($('.menu-btn').is(':checked')) {
	    		$('.menu-btn').trigger('click');
	    	}
	    }        
	})
})