JSFiddle - React, Tailwind, and code Playground

HTML

<div class="single-page-nav">
    <ul>
        <li><a href="#section1" id="a1">Section 1</a>
        </li>
        <li><a href="#section2" id="a2">Section 2</a>
        </li>
        <li><a href="#section3" id="a3">Section 3</a>
        </li>
        <li><a class="external" href="http://google.com" target="_blank">Google</a>
        </li>
    </ul>
</div>
<div class="section" id="section1">
     <h1>Section 1</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget enim eu mi volutpat ullamcorper et ut magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus nec sagittis massa. Vivamus ut tellus tellus. Donec in odio eget elit suscipit tincidunt ac eu lacus. Proin interdum sagittis diam, eu aliquam libero tristique at. Fusce elementum, velit eget consequat facilisis, nunc tellus condimentum velit, bibendum iaculis lectus tellus sed sem. Vivamus dapibus tellus at mauris mollis iaculis. Nunc facilisis augue a felis malesuada accumsan bibendum augue luctus. Curabitur pharetra, sapien dapibus tempor interdum, purus tortor aliquam nisi, ut consectetur urna ipsum et quam. Nulla sed tellus urna.</p>
</div>
<div class="section" id="section2">
     <h1>Section 2</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget enim eu mi volutpat ullamcorper et ut magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus nec sagittis massa. Vivamus ut tellus tellus. Donec in odio eget elit suscipit tincidunt ac eu lacus. Proin interdum sagittis diam, eu aliquam libero tristique at. Fusce elementum, velit eget consequat facilisis, nunc tellus condimentum velit, bibendum iaculis lectus tellus sed sem. Vivamus dapibus tellus at mauris mollis iaculis. Nunc facilisis augue a felis malesuada accumsan bibendum augue luctus. Curabitur pharetra, sapien dapibus tempor interdum, purus tortor aliquam nisi, ut consectetur urna ipsum et quam. Nulla sed...

CSS

body {
    margin: 1.25em 0 75em;
    padding: 0;
    font-size: 100%;
    font-family: sans-serif;
}
a {
    outline: 0;
}
.single-page-nav {
    background: #000;
    padding: 1.25em 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.single-page-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 80%;
    overflow: hidden;
}
.single-page-nav li {
    float: left;
    width: 24.75%;
    text-align: center;
}
.single-page-nav a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: 700;
}
.single-page-nav a:hover, .single-page-nav .current {
    color: #38acec;
}
.section {
    width: 80%;
    padding: 1.25em 0;
    margin: 0 auto;
    background: #eee;
    border-top: 1px solid #bbb;
}
#section1 {
    padding-top: 5em;
}
@media all and (max-width : 64em) {
    /* 1024px */
    body {
        font-size: 90%;
    }
    .single-page-nav a {
        font-size: 1.375em;
    }
    .section {
        width: 90%;
    }
}
@media all and (max-width : 37.5em) {
    /* 600px */
    .single-page-nav a {
        font-size: 125%;
    }
    .single-page-nav ul {
        width: 95%;
    }
    .single-page-nav li {
        width: 50%;
        padding: 0.5em 0;
    }
    .section {
        width: 95%;
    }
    #section1 {
        padding-top: 7.5em;
    }
}

JavaScript

/**
 * Single Page Nav Plugin
 * Copyright (c) 2013 Chris Wojcik <[email protected]>
 * Dual licensed under MIT and GPL.
 * @author Chris Wojcik
 * @version 1.1.0
 */

// Utility
if (typeof Object.create !== 'function') {
    Object.create = function(obj) {
        function F() {}
        F.prototype = obj;
        return new F();
    };
}

(function($, window, document, undefined) {
    "use strict";
    
    var SinglePageNav = {
        
        init: function(options, container) {
            
            this.options = $.extend({}, $.fn.singlePageNav.defaults, options);
            
            this.container = container;            
            this.$container = $(container);
            this.$links = this.$container.find('a');

            if (this.options.filter !== '') {
                this.$links = this.$links.filter(this.options.filter);
            }

            this.$window = $(window);
            this.$htmlbody = $('html, body');
            
            this.$links.on('click.singlePageNav', $.proxy(this.handleClick, this));

            this.didScroll = false;
            this.checkPosition();
            this.setTimer();
        },

        handleClick: function(e) {
            var self  = this,
                link  = e.currentTarget,
                $elem = $(link.hash);  

            e.preventDefault();             

            if ($elem.length) { // Make sure the target elem exists

                
                // Prevent active link from cycling during the scroll
                self.clearTimer();

                // Before scrolling starts
                if (typeof self.options.beforeStart === 'function') {
                    self.options.beforeStart();
                }

                self.setActiveLink(link.hash);
                
                self.scrollTo($elem, function() { 
                 
                    if (self.options.updateHash) {
                        document.location.hash = link.hash;
              ...