JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blackout"></div>
<div class="wrapper">
    <div class="overlay">
        <div class="overlay-header clearfix">
            <h1 class="fl">Header</h1>
            <a href="#" class="fr">x</a>
        </div>    
        <div class="overlay-body">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

CSS

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*floats*/
.fl{float:left}
.fr{float:right}

body,html{
    height:auto;
    min-height:100%;
}

.blackout{
    position:fixed;
    z-index:1;
    height:100%;
    width:100%;
    background:#000;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.wrapper{
    position:fixed;
    margin-top:50px;
    width:100%;
    z-index:2;
    text-align:center;
}
.overlay{
    padding:14px;
    background:#fff;
    text-align:left;
    display:inline-block;
    *display:inline;
}
.overlay-header{
    min-height:30px;
}