JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
<button class="trigger">Open modal</button>

<div class="holder">
    <div class="modal">
        <button class="close">X</button>
        test<br/>
        test
    </div>
</div>

CSS

.holder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    background: rgba(0,0,0,0.3);
    text-align: center;
}

.holder:before {
    content:'';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
}

.holder > .modal {
    display: inline-block;
    width: 300px;
    background: white;
    padding: 10px;
    position: relative;
    bottom: 100%;
}

.holder > .modal > .close {
    position: absolute;
    right: 0;
    top: 0;
}

JavaScript

var modal = {
    holder : $('.holder'),
    container : $('.modal'),
    closeBtn : $('.close'),
    trigger : $('.trigger'),
    show : show,
    hide : hide
};

modal.trigger.on('click', modal.show);
modal.closeBtn.on('click', modal.hide);

function show(){
    TweenLite.to(modal.holder, 0.3, {
        onStart : function(){
            modal.holder.css({
                zIndex : 1
            });
        },
        css : {
            opacity : 1
        }
    });
    TweenLite.fromTo(modal.container, 0.3, {
        css : {
            bottom : '100%'
        }
    },{
        css : {
            bottom : '0%'
        }
    });
}

function hide(){
    TweenLite.to(modal.holder, 0.3, {
        onComplete : function(){
            modal.holder.css({
                zIndex : -1
            });
        },
        css : {
            opacity : 0
        }
    });
    TweenLite.to(modal.container, 0.3, {
        css : {
            bottom : '-100%'
        }
    });
}