JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div id="wrap">
         <h1>Header</h1>

        <div id="some-text">Some text some text some text some text</div>
    </div>
</div>

CSS

html, body {
    width:100%;
    height: 100%;
    margin: 0;
}
#header {
    overflow: hidden;
    width:100%;
    height: 100%;
    background: orange;
    background-size:cover;
    -webkit-background-size:cover;
}
#wrap {
    height: 200px;
    width: 500px;
    background:white;
    margin:0px auto;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-250px;
}