JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="header"></div>
<div class="fader"></div>

<div class="container">
    asdsdas a dasd 
</div>

CSS

body{
    height: 1000px;
}

.header,
.fader,
.fader:after {
    left:0;
    right: 0;
}

.header,
.fader {
    top: 0; 
}

.header,
.fader:after {
    height: 50px;
}

.header {
    position: fixed;
    background: rgba(241, 218, 54, 0.43);
}

.fader {
    position: absolute;
    height: 100px;
    background-image: -webkit-linear-gradient(top, rgba(241,218,54,1) 0%,rgba(241,218,54,1) 50%,rgba(241,218,54,1) 50%,rgba(241,218,54,0) 100%);
    z-index: -1;
}

.fader:after {
    content: "";
    position: fixed;
    top: 50px; /* same as its height */
    background: #fff;
}

.container {
    position: relative;
    margin-top: 50px; /* as always usual, same as headers height.*/
}