JSFiddle - React, Tailwind, and code Playground

HTML

<button class="menu-btn">
  <span class="bar"></span>
</button>
<div class="navigation">
  <div class="header-image"></div>
  <ul>
    <div class="link"><li><a href=""></a></li></div>
    <div class="link"><li><a href=""></a></li></div>
    <div class="link"><li><a href=""></a></li></div>
    <div class="link"><li><a href=""></a></li></div>
  </ul>
</div>

CSS

*{
  margin:0;
  padding: 0;
}
.navigation{
  position:fixed;
  left: 0;
  top: 30px;
  width: 250px;
  display: none;
  height: 100%;
  box-shadow: 1px 0px 15px 0px #999;
  transition: .2s;
}
.header-image{
  height: 150px;
  background: yellow;
  margin-bottom: 5px;
}
ul{
  list-style-type: none;
}
ul li{
  display: inline-block;
  width: 100%;
  background: #eee;
}
ul li a{
  display: block;
  width: 100%;
  height: 50px;
}
.clearfix:after{
  content="";
  display: table;
  clear: both;
}
.menu-btn{
  height:50px;
  width: 50px;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  position:fixed;
  left:0;
  top:0;
  z-index: 100;
}
.bar{
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background: black;
  left: 10px;
  right: 10px;
}
.bar:before,.bar:after{
	display: block;
	content: "";
	left: 0;
	width: 100%;
	background-color: black;
	position: absolute;
	height: 2px;
	transition: .15s ease-in-out;
}
.bar:before{
  top: -10px;
}
.bar:after{
  top: 10px;
}

JavaScript

$('.menu-btn').click(function() {
     if($('.navigation').is(":visible")) {
            $('.navigation').hide();
        } else {
           $('.navigation').show();
        }
});
$(document).click(function(event) { 
    if(!$(event.target).closest('.navigation').length &&      !$(event.target).hasClass('menu-btn')) {
        if($('.navigation').is(":visible")) {
            $('.navigation').hide();
        }
    }        
})