JSFiddle - React, Tailwind, and code Playground

by sandeepj

HTML

<h1 id="preHead">Catchy Title</h1>
<h2 id="headline">Headline goes here</h2>
<P></p>
<p id="introBlurb">A very compelling blurb here. Praesent volutpat rhoncus purus, ullamcorper dapibus ante pulvinar non. Maecenas fringilla justo nec justo blandit non rhoncus nunc elementum.</p>

<div class="partOne">
<p>Part one here. This appears on first scroll event.</p>
</div>

<div class="partTwo">
 <p>Part two here. This appears on second scroll event.</p>
</div>   

<div class="kicker">
 <p>Kicker here. This appears on 3rd scroll event.</p>
</div>

CSS

body {
    background-color: #f8f8f8;
    margin: 5px;
    font-family: arial, sans-serif;
}

div#mainText {
    width: 960px;
    margin: o auto;
    padding: 10px;
    background-color: #f8f8f8;
    font-size: 1em;
}

h1 {
    text-transform:uppercase;
    color: gray;
}

h2 {
    font-family:"Times New Roman", Times, serif;
    font-size:2.5em;
}

.partOne
 {
    color: gray;
    display:none;
}

.partTwo
 {
    color: gray;
    display:none;
}

.partThree
 {
    color: gray;
    display:none;
}

.kicker
 {
    color: gray;
    display:none;
}


;