JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <h1>This is a sample webpage</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sint facilis error quia sequi alias cupiditate officia non voluptatibus est delectus explicabo recusandae eveniet saepe libero maxime dolore expedita aliquam.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sint facilis error quia sequi alias cupiditate officia non voluptatibus est delectus explicabo recusandae eveniet saepe libero maxime dolore expedita aliquam.
    </p>
</main>
<div class="overlay">
    <div class="overlay-inner">
        <form>
            <a href="http://codepen.io/shshaw/pen/gEiDt" target="_blank">absolute centering method @ codepen</a>
            <input type="text" placeholder="Hello World" />
            <br>
            <button>Submit to the world!</button>
        </form>
    </div>
</div>

CSS

.overlay {
    z-index: 16777271;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}

.overlay-inner {
    height: 50%; /* Set your own height: percents, ems, whatever! */
    width: 50%; /* Set your own width: percents, ems, whatever! */
    overflow: auto; /* Recommended in case content is larger than the container */
    margin: auto; /* Center the item vertically & horizontally */
    position: absolute; /* Break it out of the regular flow */
    top: 0; left: 0; bottom: 0; right: 0; /* Set the bounds in which to center it, relative to its parent/container */
}

.overlay-inner form {
    padding: 20px;
    background: white;
    color: black;
}

.overlay-inner form a {
    color: #00aced;
    font-size: 2em;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
    display: block;
}