JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<header>
<h1>Some page</h1>
<nav>
    <ul>
        <li>Link 1</li><li>Link 2</li><li>Link 3</li>
    </ul>
</nav>
</header>

<section>
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non magna quis purus congue vestibulum nec ut felis. Duis porta tristique metus, ac ultricies augue egestas eget. Praesent posuere nibh eget ante interdum ac rutrum ante ornare. Nullam ultrices varius eleifend. Pellentesque et enim nulla. In bibendum massa at quam lacinia sed dictum lacus porttitor. Aliquam nec tortor neque. Sed dolor ante, vulputate et tempor ac, pulvinar ac lacus. Phasellus lacinia eros sit amet eros scelerisque malesuada. Nullam venenatis auctor sagittis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non magna quis purus congue vestibulum nec ut felis. Duis porta tristique metus, ac ultricies augue egestas eget. Praesent posuere nibh eget ante interdum ac rutrum ante ornare. Nullam ultrices varius eleifend. Pellentesque et enim nulla. In bibendum massa at quam lacinia sed dictum lacus porttitor. Aliquam nec tortor neque. Sed dolor ante, vulputate et tempor ac, pulvinar ac lacus. Phasellus lacinia eros sit amet eros scelerisque malesuada. Nullam venenatis auctor sagittis.</p>
</section>
<section>
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non magna quis purus congue vestibulum nec ut felis. Duis porta tristique metus, ac ultricies augue egestas eget. Praesent posuere nibh eget ante interdum ac rutrum ante ornare. Nullam ultrices varius eleifend. Pellentesque et enim nulla. In bibendum massa at quam lacinia sed dictum lacus porttitor. Aliquam nec tortor neque. Sed dolor ante, vulputate et tempor ac, pulvinar ac lacus. Phasellus lacinia eros sit amet eros scelerisque malesuada. Nullam venenatis auctor sagittis.</p>
</section>
<section>
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non magna quis purus congue...

CSS

* {
text-shadow: 1px 1px 1px #fff;
}

@font-face {
  font-family: "LeagueGothicRegular";
  src: url("http://luke.is/themes/site_themes/lukeis/fonts/League_Gothic-webfont.eot"), url("http://luke.is/themes/site_themes/lukeis/fonts/League_Gothic-webfont.woff") format("woff"), url("http://luke.is/themes/site_themes/lukeis/fonts/League_Gothic-webfont.ttf") format("truetype"), url("http://luke.is/themes/site_themes/lukeis/fonts/League_Gothic-webfont.svg") format("svg");
}

body {
    background-color: #f8f8f8;
}

h1 {
    color: #333;
    float: left;
    font-family: "LeagueGothicRegular";
    font-size: 3em;
    text-transform: uppercase;
}
nav {
    float: right;
}
nav li {
    color: #333;
    cursor: pointer;
    float: left;
    font-family: "LeagueGothicRegular";
    font-size: 2em;
    margin-top: 15px;
    margin-left: 20px;
    text-transform: uppercase;
    -webkit-transition: 0.15s all ease-in;
}
nav li:nth-child(1):hover {
    color: #FE4365;
}
nav li:nth-child(2):hover {
    color: #F9CDAD;
}
nav li:nth-child(3):hover {
    color: #83AF9B;
}

header {
    overflow: hidden;
}

section {
    border-top: 1px solid #333;
    margin-top: 30px;
  padding-top: 30px;  
}    

section h2 {
    color: #aaa;
    font-family: "LeagueGothicRegular";
    font-size: 2em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
section p {
    color: #aaa;
    font-family: Cambria;
    font-size: 0.9em;
    margin-bottom: 10px;
}

JavaScript

$(window).scroll(function() {
    $("section").each(function() {
        if(is_inside($(this))) {
            $(this).addClass("active");
        }
    });
});

is_inside = function($e) {
    return true;
}