JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<h1>The Geek Invasion</h1>
<div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo scelerisque adipiscing. Nunc elementum ante id massa lobortis adipiscing eget a est. Cras ornare dui nec sem malesuada tristique. Curabitur non dapibus nunc. Duis sit amet libero ut turpis rutrum posuere. Proin convallis quam nunc, in mattis risus feugiat vel. Donec molestie ultrices leo, in iaculis dolor ornare quis. Pellentesque euismod orci quis odio vestibulum, ac malesuada dolor venenatis. Donec commodo neque a metus rhoncus pretium. Curabitur tempor nisl eget lectus vehicula elementum. Suspendisse tempus eleifend odio vel mattis. Integer feugiat facilisis iaculis. Proin aliquam diam gravida, lacinia nibh non, molestie mi. Proin nisi sapien, fermentum sed euismod sit amet, venenatis at erat. Quisque viverra pulvinar velit, consequat tempus enim commodo bibendum. Integer urna ipsum, posuere id sodales et, sollicitudin id erat.</p>
</div>
<div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo scelerisque adipiscing. Nunc elementum ante id massa lobortis adipiscing eget a est. Cras ornare dui nec sem malesuada tristique. Curabitur non dapibus nunc. Duis sit amet libero ut turpis rutrum posuere. Proin convallis quam nunc, in mattis risus feugiat vel. Donec molestie ultrices leo, in iaculis dolor ornare quis. Pellentesque euismod orci quis odio vestibulum, ac malesuada dolor venenatis. Donec commodo neque a metus rhoncus pretium. Curabitur tempor nisl eget lectus vehicula elementum. Suspendisse tempus eleifend odio vel mattis. Integer feugiat facilisis iaculis. Proin aliquam diam gravida, lacinia nibh non, molestie mi. Proin nisi sapien, fermentum sed euismod sit amet, venenatis at erat. Quisque viverra pulvinar velit, consequat tempus enim commodo bibendum. Integer urna ipsum, posuere id sodales et, sollicitudin id erat.</p>
</div>
<div class="wrap">
    <p>Lorem ipsum dolor sit amet,...

CSS

@import url('http://fnt.webink.com/wfs/webink.css/?project=48A0FEEA-BDD3-4D13-87A6-73DC10C33BB5&fonts=31B87CF9-F410-ED20-E812-2F143D523935:f=Hermes-Regular');
body {
    padding: 25px;
}
div {
    border: 2px solid #BBB;
    border-radius: 10px;
    margin: 15px 0;
    padding: 15px;
}
h1 {
    color: #2CAE85;
    font: bold 30px "Hermes-Regular", sans-serif;
}
p {
    font: 16px "Hermes-Regular", sans-serif;
    text-align: justify;
}
.wrap.active {
    border: 2px solid #2CAE85!important;
}

JavaScript

jQuery(function() {
    function currentArticle() {
        var sT = $(window).scrollTop() + $(window).height() / 3,
            mark = 10000,
            el
        ;
        $(".wrap").each(function() {
            if( Math.abs( sT - $(this).offset().top ) <= mark ) {
                el = $(this);
                mark = Math.abs( sT - $(this).offset().top );
            }
        });
        $(".active").removeClass("active");
        el.addClass("active");
    }
    $(window).load(function() {
        var scroll = ~~(Math.random() * $("body").height()) + 1;
        console.clear();
        $(window).scrollTop(scroll);
        currentArticle();
    });
    $(window).scroll(function() {
        currentArticle();
        console.log( $("body").height() );
        console.log( $(window).scrollTop() + $(window).height() );
    });
});