JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal-overlay modal-item"></div>
<div class="modal-content modal-item">
    Oi
</div>

<a href="#" class="modal-open">open</a>

CSS

.modal-item {
    display: none;
}
.modal-overlay {
    background: rgba(0, 0, 0, 0.8);
    height: 100%;
    width: 100%;
    position: fixed;
}

.modal-content {
    background: white;
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -200px;
}

JavaScript

var modal = (function(){
    return {
        init: function(){
            this.cache();
            this.bind();
        },
        
        cache: function(){
            this.open = $('.modal-open');
            this.wrapper = $('.modal-item');
            this.overlay = $('.modal-overlay');
        },
        
        bind: function(){
            this.open.on('click', this.openModal);
            this.overlay.on('click', this.hideModal);
        },
        
        openModal: function(e){
            e.preventDefault();
            $(this).hide();
            modal.wrapper.fadeIn();
        },
        
        hideModal: function(){
            modal.wrapper.fadeOut();
            modal.open.show();
        }
        
    }
})();

modal.init();