JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0);" id="somelink">Show Overlay</a>

CSS

body{height: 100%;padding: 0px;}
.overlayWindow { 
    height: 100px; 
    width: 100px; 
    padding: 10px;
    background: #fff;
    position: absolute;
    z-index: 3000;
    box-shadow: 0px 0px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
    -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.5);
}

.overlayContent {
    border: 1px #efefef solid;   
}

.closeButton{
    display:block;
    height:20px;
    width:20px;
    top:-8px;
    right:-8px;
    border:2px #fff solid;
    border-radius:12px;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    background:#111;
    position:absolute;
    cursor:pointer;
    box-shadow:0 0 4px rgba(0,0,0,1);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,1);
    -moz-box-shadow:0 0 4px rgba(0,0,0,1);
}

JavaScript

var Auga = (function(){
    var defaults = {
        width: 400,
        height: 300,
        parent: 'body',
        animate: {
            show: { opacity: 1 },
            hide: {opacity:0},
            duration: 1000
        },
        events:{
            overlay:{}
        }
    };

    return function(element, options){
        // Make the options global.
        this.options = jQuery.extend(defaults,options||{});
        this.win = jQuery(window);

        this.buildWindow();
        this.win.resize(this.centerAuga);
        jQuery(this.options.parent).append(this.auga);
    };
})();

Auga.prototype = {
    getHeight: function(){
        return this.options.height;
    },
    getOverlay: function(){
        return this.auga;
    },
    buildWindow:function() {
        var self = this;
        this.overlay = {};
        this.auga = this.overlay.window = jQuery("<div>",{
            "class": "overlayWindow",
            "css": {
                height: self.options.height,
                width: self.options.width,
                opacity: 0,
                display: "none",
                visibility: "hidden",
                zIndex: 3000
            }
        });
        
        this.overlay.content = jQuery('<div>',{
            "class":"overlayContent",
            "css":{
                "height": self.options.height - 2
                }
        });
        
        this.overlay.close = jQuery("<a>",{
            "class":"closeButton"
        }).click(this.hide);
        
        this.auga.append(this.overlay.close);
        this.auga.append(this.overlay.content);
    },
    centerAuga : function(){
        var docHeight = jQuery(document).height();
        this.top =  (this.win.height()/2)-this.options.height/2 + this.win.scrollTop();
        this.left = (this.win.width()/2)-this.options.width/2;
        
        this.auga.css({
            'top': this.top,
            'left': this.left
        });
    },
    animate:function(showHide){
       ...