JSFiddle - React, Tailwind, and code Playground

by Zak Knudsen

HTML

<script src="cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<body>
    <div id="page">
        <header id="masthead" class="site-header" role="banner">
            <div class="site-branding">
                <a href="#" rel="home"><img src="//placehold.it/370x225?text=logo+image" width="370" height="225" alt="placeholder" /></a>
            </div>
        </header>
        <div id="content" class="site-content">
            <div id="primary" class="content-area">
                <main id="main" class="site-main" role="main">
                    <article class="article">
                        <header class="entry-header screen-reader-text">
                             <h1 class="entry-title">Article Title</h1>
                        </header>
                        <div class="entry-content">
                            <div class="container">
                                <div id="press-clippings">
                                    <section class="margin-top-20">Section</section>
                                    <section class="margin-top-20">Section</section>
                                    <section class="margin-top-20">Section</section>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="article">
                        <header class="entry-header screen-reader-text">
                             <h1 class="entry-title">Article Title</h1>
                        </header>
                        <div class="entry-content">
                            <div class="container">
                                <div id="press-clippings">
                                    <section...

CSS

html{font-size: 62.5%;}body{font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.7em;font-weight: 300;line-height: 1.33;color: #000;text-rendering: optimizeLegibility;}p {font-size: 1.7rem;line-height: 2.3rem;margin-top: 0;}

.screen-reader-text {
    position: absolute;
    left: -100%;
    bottom: -100%;
}
#masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(128, 128, 0, 0.3);
    border-bottom: 2px solid blue;
}
#masthead:before {
    content: 'Transition area. Below this area content in #content should go from 100% opacity (at the bottom) to 0%.';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: blue;
    height: 45px;
    text-align: center;
    color: white;
    opacity: 0.66;
}
.site-branding {
    display: block;
    margin: 15px auto 0;
}
.site-branding img {
    display: block;
    opacity: 0.75;
    margin: 0 auto;
}
#content {
    padding-top: 270px;
    background-color: rgba(128,0,0,0.3);
}
#article {
}
.margin-top-20 {
    margin-top: 200px;
    padding: 20px 0;
}
article:nth-of-type(2n) {
    background-color: rgba(0,128,0,0.5);
}
article:nth-of-type(2n+1) {
    background-color: rgba(0,0,128,0.5);
}
article section:nth-of-type(1) {
    background-color: rgba(0,0,0,0.1);
}
article section:nth-of-type(2) {
    background-color: rgba(0,0,0,0.33);
}
article section:nth-of-type(3) {
    background-color: rgba(0,0,0,0.66);
}