JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid text-center">
    <header role="banner" id="banner">
         <h1>sample</h1>

         <h2>text</h2>

         <h3>bootstrap</h3>

    </header>
</div>

CSS

body {
    background-color: #444;
}
header {
    position:fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    /* set a width */
    height: 400px;
    /* then a height */
    margin-top: -200px;
    /* set to negative half of your height */
    margin-left: -250px;
    /* set to negative half of your width */
    font-family: Roboto-thin;
    padding: 0px;
    border-style: none;
    background-color: red;
    color:#ffffff;
}
</head>