JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hamburger-icon"></div>
<div class="overlay">
    <div class="close-button">X</div>
</div>

CSS

.hamburger-icon{
    background: url('https://cdn4.iconfinder.com/data/icons/flat-black/128/menu.png') no-repeat;
    background-size: 100%;
    height: 32px;
    width: 32px;
    position: absolute;
    top: 0;
    right: 0;
}
.overlay{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
}

JavaScript

this.Module = {};

this.Module.Menu = (function() {
	function Menu() {
		//constructor
		this.hamburgerIcon = $('.hamburger-icon')
		this.closeButton = $('.close-button')
        this.overlay = $('.overlay');
        
		this.hamburger();
		this.closeOverlay();
	}

	Menu.prototype.hamburger = function(){
		this.hamburgerIcon.on('click', function(){
            console.log("hamburger-icon:clicked");
			this.overlay.fadeIn();
			$(this).fadeOut();
			this.closeButton.fadeIn();
			$('body').addClass('is-locked');
		});
	};

	Menu.prototype.closeOverlay = function(){
		this.closeButton.on('click', function(){
			this.overlay.fadeOut();
			this.hamburgerIcon.fadeIn();
		});
	};

	return Menu
})();

new Module.Menu();