JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="foo">foo</div>
</div>

CSS

html,body{
    height: 100%;
}
#main{
    height: 100%;
    position: relative;
}
#foo{
    background: #f1f1f1;
    height: auto;
    /* height: 100%; */
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
#foo:before{
    content: "bar";
    height: 100%;
    display: block;
}