JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div id="top">
    <div class="greenblock"></div>
    <div class="darkblock"></div>
    <div class="darkblock2"></div>
</div>

CSS

/* Green Fade In */
@-webkit-keyframes greenFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes greenFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-o-keyframes greenFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes greenFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* What If */
@-webkit-keyframes whatIfFade {
    0% { opacity: 0; }
    99.99% {opacity:1;}
    100% { opacity: 0; }
}
@-moz-keyframes whatIfFade {
    0% { opacity: 0; }
    99.99% {opacity:1;}
    100% { opacity: 0; }
}
@-o-keyframes whatIfFade {
    0% { opacity: 0; }
    99.99% {opacity:1;}
    100% { opacity: 0; }
}
@keyframes whatIfFade {
    0% { opacity: 0; }
    99.99% {opacity:1;}
    100% { opacity: 0; }
}

body {
    margin:0;
    padding:0;
    height:100%;
}

#top .greenblock{
    width:100%;
    height:100vh;
    
    background-color:#c3d600;
    background-image: url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo-l.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
    
    -webkit-animation: greenFadeIn 3s ease-in 1;
    -moz-animation: greenFadeIn 3s ease-in 1;
    -o-animation: greenFadeIn 3s ease-in 1;
    animation: greenFadeIn 3s ease-in 1;
}

#top .darkblock{
    width:100%;
    height:150vh;
    
    background-color:#3b414f;
    background-image: url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo-l-gr.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#top .darkblock2{
    width:100%;
    height:150vh;
    
    background-color:#3b414f;
    background-image: url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo-l-whatif-gr.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

.whatif {
    position:relative;
    top: 100%;
    left:...