JSFiddle - React, Tailwind, and code Playground

HTML

<p><input type="button" value="Popup!" id="popup__toggle" /></p>
<!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]-->
<div class="popup__overlay">
    <div class="popup">
        <a href="#" class="popup__close">X</a>
        <h2>Welcome!</h2>
        <p>Please enter your login and password to continue</p>
        <input type="button" value="Log in" />
    </div>
    <!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]-->
</div>

CSS

html {
    min-height: 100%
    }
body {
    min-height: 100%;
    background: #fff;
    font: 14px/125% Tahoma;
    }
p {
    margin: 1em 0;
    text-align: center
    }
.popup__overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    text-align: center
    }
    .popup__overlay:after {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        height: 100%;
        width: 0;
        vertical-align: middle;
        content: ''
        }
    /* Added for IE<9 compatibility */
    .popup__overlay_ie {
        background: #000;
        opacity: .7;
        filter: alpha(opacity=70)
        }
.popup {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    max-width: 80%;
    padding: 20px;
    border: 5px solid #fff;
    border-radius: 15px;
    box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4);
    background: #fff;
    vertical-align: middle
    }
/* Added instead of :after pseudoelement */
.popup__valignfix {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 0;
    height: 100%;
    vertical-align: middle
    }
.popup-form__row {
    margin: 1em 0
    }
label {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 120px;
    text-align: left
    }
input[type="text"], input[type="password"] {
    margin: 0;
    padding: 2px;
    border: 1px solid;
    border-color: #999 #ccc #ccc;
    border-radius: 2px
    }
input[type="button"] {
    padding: 6px 16px;
    border: 0;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
    box-shadow:         inset 0 1px 1px rgba(255,255,255,.3);
    cursor: pointer;
    background: #444;
    background: -webkit-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    background:    -moz-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    background:    ...

JavaScript

p = $('.popup__overlay')
$('#popup__toggle').click(function() {
    p.css('display', 'block')
})
p.click(function(event) {
    e = event || window.event
    if (e.target == this) {
        $(p).css('display', 'none')
    }
})
$('.popup__close').click(function() {
    p.css('display', 'none')
})