JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    
    <div class="h1Wrapper">
        <h1>This is my title</h1>
    </div>
    
</header>

<article></article>

<footer></footer>

CSS

header,
footer {
    width: 100%;
    min-height: 100px;
    background: #eee;
    overflow: hidden;
}

.h1Wrapper {
    /*background: #bbb;*/
    background-image: -webkit-linear-gradient(left, #BBBBBB 500px, #FFFFFF 500px);
    
}

article {
    margin: 0 auto;
    max-width: 500px;
    height: 100px;
    background: #ddd;
}

h1 {
    margin: 30px auto;
    width: 500px;
    background: #bbb;
}