JSFiddle - React, Tailwind, and code Playground

HTML

<body>
      <div id="header-wrap">
    <header><h1>Hi. I'm a Header</h1></header>
</div><!-- header-wrap -->
<article>    
    <p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p>Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.</p>

<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p>Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> 
        <p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p>Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.</p>

<p>Nullam quis risus eget urna mollis ornare vel eu leo....

CSS

html { font-size: 62.5%;  overflow-x: hidden;} 
body { width: 100%; font-size: 16px; font-size: 1.6rem; line-height: 1.5; line-height: 2.4rem; font-family: sans-serif; }
body::after { 
    content:"";
    position: fixed;
    height: 210px; 
    width: 110%;
    bottom: -10px;
    left: -10px;
    z-index: 1000;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

p { color: #444; margin-bottom: 24px; margin-bottom: 2.4rem; }

div#header-wrap { 
        width: 100%;
        background: #FFF;
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
           -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
            -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
             -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
                box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
       position: fixed;
       top: 0;
       left: 0;
       text-align: center;
        z-index: 1000;    
}

header {
    margin: 0 auto;    
    width: 400px;
    background: #000;
}
  

header h1 {  font-size: 32px; font-size: 3.2rem; padding: 24px 0; color: #fff; text-align: center; text-transform: uppercase; font-weight: bold; letter-spacing: .1em; }

article { max-width: 400px; margin: 120px auto 0 auto; }