JSFiddle - React, Tailwind, and code Playground

by StormMan

HTML

<script src="http://deco-irk.ru/js/jquery.nav.js"></script>
<ul id="nav">
    <li class="current"><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
</ul>
<ul id="nav2">
    <div><li class=""><a href="#section-4">Section 4</a></li>
    <li><a href="#section-5">Section 5</a></li>
        <li><a href="#section-6">Section 6</a></li></div>
</ul>

<div id="section-1">
    <strong>Section 1</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor...

CSS

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
color: #222;
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
h1,
h2,
h3,
p,
pre,
ul {
margin: 0;
padding: 0;
}
h1 {
font-size: 48px;
line-height: 1;
margin-bottom: 1em;
}
h2 {
font-size: 24px;
line-height: 1;
margin-bottom: 1em;
}
h3 {
font-size: 16px;
line-height: 1;
margin-bottom: 1em;
}
p,
pre,
ul {
margin-bottom: 2em;
}
pre {
background: #fefefe;
border: 1px solid #dedede;
overflow-x: auto;
padding: 2em;
}
ul {
margin-left: 1em;
}
#nav {
left: 20px;
list-style: none;
margin: 0;
position: fixed;
top: 20px;
}
#nav li {
margin-bottom: 2px;
}
#nav a {
background: #ededed;
color: #666;
display: block;
font-size: 14px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover {
background: #dedede;
}
#nav .current a {
background: #666;
color: #ededed;
}
#container {
margin: 0 auto;
width: 800px;
}
.section {
border-bottom: 5px solid #ccc;
min-height: 60vh;
padding: 50px 20px;
}
.section p:last-child {
margin-bottom: 0;
}
#nav2 {
left: 180px;
list-style: none;
margin: 0;
position: fixed;
top: 20px;
}
#nav2 li {
margin-bottom: 2px;
}
#nav2 a {
background: #ededed;
color: #666;
display: block;
font-size: 14px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
#nav2 a:hover {
background: #dedede;
}
#nav2 .current a {
background: #666;
color: #ededed;
}

JavaScript

$('#nav').onePageNav({
    currentClass: 'current',
    changeHash: false,
    scrollSpeed: 750,
    scrollThreshold: 0.5,
    filter: '',
    easing: 'swing',
    begin: function() {
        //I get fired when the animation is starting
    },
    end: function() {
        //I get fired when the animation is ending
    },
    scrollChange: function($currentListItem) {
        //I get fired when you enter a section and I pass the list item of the section
    }
});

$('#nav2').onePageNav({
    currentClass: 'current',
    changeHash: false,
    scrollSpeed: 750,
    scrollThreshold: 0.5,
    filter: '',
    easing: 'swing',
    begin: function() {
        //I get fired when the animation is starting
    },
    end: function() {
        //I get fired when the animation is ending
    },
    scrollChange: function($currentListItem) {
        //I get fired when you enter a section and I pass the list item of the section
    }
});