JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<body>
    <div class="body-wrapper">
        <div class="frame-wrapper">
            <div class="container">
            </div>
        </div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
}
.frame-wrapper {
    height: 100%;
    width: 100%;
    margin: 0 auto;
}
.frame-wrapper:before, .container {
    display: inline-block;
    vertical-align: middle;
}
.frame-wrapper:before {
    content:'';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    margin-left: -0.25em;
}
.container {
    color: #000;
    width: 100%;
    height: 50%;
    box-shadow: 0px 0px 0px 5px #000;
}
.body-wrapper {
    height: 100%;
    width: 100%;
    max-width: 48em;
    margin: 0 auto;
}