JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lab.stephaneguigne.com/js/jquery-scrollsections/example/js/vendor/modernizr-2.5.3.min.js"></script>
<script src="http://lab.stephaneguigne.com/js/jquery-scrollsections/example/js/plugins.js"></script>
<section id="home" class="scrollsections">
	<div class="title">
        HOME
        <p class="overflow-txt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo augue, fermentum ut finibus ac, congue eget mi. Duis quis neque accumsan, lacinia velit non, varius diam. Proin accumsan purus a mi varius blandit. Quisque egestas augue quis nunc ultricies aliquam. In rutrum vel enim nec tincidunt. Duis sed ultricies mauris, vitae accumsan ligula. Nulla facilisi. Ut consequat egestas enim. Pellentesque ligula risus, sodales sed dui at, gravida rutrum quam. Vestibulum gravida venenatis nisi, at viverra libero sagittis vel. Vestibulum vehicula odio feugiat turpis bibendum egestas. Suspendisse convallis mi in tortor pretium, a efficitur justo lobortis. Aenean in mauris molestie, convallis dolor ac, consectetur arcu. </p>
    </div>
    
</section>

<section id="about" class="scrollsections">
	<div class="title">
        ABOUT
        <p class="overflow-txt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo augue, fermentum ut finibus ac, congue eget mi. Duis quis neque accumsan, lacinia velit non, varius diam. Proin accumsan purus a mi varius blandit. Quisque egestas augue quis nunc ultricies aliquam. In rutrum vel enim nec tincidunt. Duis sed ultricies mauris, vitae accumsan ligula. Nulla facilisi. Ut consequat egestas enim. Pellentesque ligula risus, sodales sed dui at, gravida rutrum quam. Vestibulum gravida venenatis nisi, at viverra libero sagittis vel. Vestibulum vehicula odio feugiat turpis bibendum egestas. Suspendisse convallis mi in tortor pretium, a efficitur justo lobortis. Aenean in mauris molestie, convallis dolor ac, consectetur arcu. </p>
    </div>
</section>

<section id="works"...

CSS

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.scrollsections {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
#scrollsections-navigation {
  position: fixed;
  top: 50%;
  right: 20px;
  width: 10px;
  margin-top: -177px;
  z-index: 100;
  background: transparent;
  overflow: hidden;
}
.scrollsections-menuitem {
  position: relative;
  display: block;
  height: 40px;
  width: 10px;
  overflow: hidden;
  background: #ffffff;
  text-indent: -9999px;
  margin: 0 0 5px 0;
  cursor: pointer;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.scrollsections-menuitem.active-scrollsection {
  width: 2px;
  margin-left: 8px;
  cursor: default;
}
#home {
  background: #000000;
}
#about {
  background: #1a1a1a;
}
#works {
  background: #333333;
}
#contact {
  background: #4d4d4d;
}
#other {
  background: #666666;
}
#clients {
  background: #808080;
}
#bio {
  background: #999999;
}
#networks {
  background: #b3b3b3;
}
section {
position: relative;
}
.title {
color: white;
line-height: 60px;
font-size: 60px;
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -200px;
width: 400px;
text-align: center;
} 
.title p{
    font-size: 12px;
    max-height: 100px;
    line-height: 1.3em;
    overflow: auto;
}

JavaScript

(function ($, window, Math, undefined) {
	'use strict';

	/**
	 * The name of this jQuery plugin.
	 *
	 * @type String
	 */
	var pluginName = 'scrollSections';

	/**
	 * The default options of this plugin.
	 *
	 * @type Object
	 */
	var defaults = {
		// Attribute from which we retrieve the unique identifier for each section.
		attr: 'id',
		// The class that should be applied to the current navigation item.
		active: 'active-scrollsection',
		// Enable keyboard controls.
		keyboard: true,
		// Enable mousehweel controls.
		mousewheel: true,
		// Enable touch controls.
		touch: true,
		// Enable scrollbar controls.
		scrollbar: true,
		// Enable navigation controls, also see createNavigation option.
		navigation: true,
		// Maximum sections to scroll within mousewheel interaction.
		scrollMax: 1,
		// Function to execute before each scroll.
		before: null,
		// Function to execute after each scroll.
		after: null,
		// Prefix for classes and ids of DOM elements.
		prefix: 'scrollsections',
		// Scroll to first section on initialization, instead of the section that is visible. Also have a look at the option
		// animateScrollToFirstSection.
		alwaysStartWithFirstSection: false,
		// Scroll to initial section without animation.
		animateScrollToFirstSection: false,
		// Create navigation? If the option navigation is set to false, this will have no effect!
		createNavigation: true,
		// The animation speed.
		speed: 500,
		// Throw execption if something goes wrong.
		exceptions: false
	};

	/**
	 * Catchable exception if something goes wrong.
	 *
	 * @param {String} message
	 *   A message describing what went wrong.
	 * @returns {ScrollSectionsException}
	 */
	function ScrollSectionsException(message) {
		this.name = 'ScrollSectionsException';
		this.message = message;
	}

	/**
	 * Instantiate new instance of the scrollSections plugin.
	 *
	 * @param {jQuery} elements
	 *   The DOM elements that make up our sections.
	 * @param {Object} options
	 *   [Optional]...