JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<div id="IntroPage" class="introPage flexBox">
    <div class='line'></div>
    <div class="test">Heading</div>
    <div class='line'></div>

CSS

body {
    background: grey;
}
.introPage {
    position: relative;
    width: 100%;
    max-width: 100vw;
    padding-top: 3em;
    height: 100%;
    background: gray;
    display: table-row;
}
.test {
    position: relative;
    text-align: center;
    width: 20%;
    min-width: 1.5em;
    display: table-cell;
    font-variant: small-caps;
    font-weight: 700;
    font-size: 2em;
    display: table-cell;
    line-height: 2.5em;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 20%;
}
.line {
    ;
    position: relative;
    background: #0099FF;
    height: .4em;
    border-radius: 2px;
    display: table-cell;
    height: 6px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 39%;
}

.flexBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}