JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.2/jquery.fullPage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.2/vendors/jquery.slimscroll.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.2/jquery.fullPage.min.css">
<!DOCTYPE html>
<body>

	<header>

		<div class="container">

			<a href="#" id="logo"> </a>
			
			<ul id="menu">
				<li data-menuanchor="home"><a href="#home">Home</a></li>
				<li data-menuanchor="what-we-do"><a href="#what-we-do">What We Do</a></li>
				<li data-menuanchor="our-work"><a href="#our-work">Our Work</a></li>
				<li data-menuanchor="contact-us"><a href="#contact-us">Contact Us</a></li>
			</ul>

			<div id="menuRespBtn"></div>

		</div>


	</header>

	<div id="fullpage">

	<ul class="social-floater">
		<li><a href="https://www.facebook.com/ifstudioco" target="_blank"><i class="fa fa-facebook"></i></a></li>
		<li><a href="https://twitter.com/ifstudioco" target="_blank"><i class="fa fa-twitter"></i></a></li>
	</ul>
		
		<div class="section home active" id="firstRow" data-anchor="home">
			
			
			<div class="container">
	
				<h1>Before testing, make sure you're using <span>Internet Explorer</span> to reproduce the issue.</h1>
				
				<h2>Second text<br></h2>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, error. Laboriosam temporibus, et quam ea!</p>

			</div>

		</div>

		<div class="section what-we-do" id="secondRow" data-anchor="what-we-do">

			<div class="container">
				
				<div class="row">
				
					<div class="col2">
						<div class="title">Title 1</div>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae in laboriosam quo illo suscipit quas, omnis officiis veniam non laborum reprehenderit ratione blanditiis delectus facilis facere sed maiores. Incidunt quos, eaque dolorem cupiditate optio deserunt molestiae atque voluptas blanditiis...

CSS

}}body{line-height:1;padding-bottom:41px}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{padding:0}body,input,textarea,input[type=submit],#authorize{font-family:"Lato",arial,helvetica,sans-serif;font-weight:300}header{position:fixed;width:100%;z-index:99;padding-bottom:6px;transition:background .3s}header.bg-trans{background:transparent}header .container{display:block;height:102px;margin:0px auto;width:1138px;font-weight:300;padding-top:10px}header ul#menu.whitetext *,ul.social-floater.whitetext *{color:white!important}header ul#menu *,ul.social-floater *{transition:color .3s}ul#menu{display:block;float:right;height:100%;width:594px;list-style:none;padding:0}ul#menu li a{color:#bfb3b2;margin-right:22px;padding:22px;margin-top:20px;display:block;text-transform:uppercase;float:left}ul#menu li:last-child a{margin-right:0px}ul#menu li:hover a,ul#menu li.active a{background-color:#46c8ab;color:white}#logo{background:url(../images/Logo_ideas-factory.png) no-repeat center;background-size:100%;display:block;float:left;height:102px;width:268px}h1,h2,p{font-weight:300;color:#333}h1{font-size:54px;line-height:61px}h1...

JavaScript

$(window).resize(OrderElements);

$(document).ready(function() {

	var lastScrollTop = 0;
	var scrollDirection;
	var lastSectionVisited;
	var manualScrollOverride = false;
	var scrollOffsetBottom = 40;
	var scrollOffsetTop = 80;
	var widthLimitDesktop = 710;
	
	$('#fullpage').fullpage({
		anchors:['home', 'what-we-do', 'our-work', 'contact-us'],
		menu: '#menu',
		css3: true,
		scrollingSpeed: 1000,
		scrollBar: true,
		scrollOverflow: true,
		afterLoad: function(anchorLink, index){
            var loadedSection = $(this);

            //using index
            if(index == 4){
				if($(window).innerWidth() >= 640){
	            	$('#menu').addClass('whitetext');
	            	$('ul.social-floater').addClass('whitetext');
	            	$('header').addClass('bg-trans');
				}else{
					removeAllOfEm();
				}
            } 
            else { 
            	removeAllOfEm();
            }
        }
	});

	if(checkIfMobile().any()){
		// $('head').append('<link rel="stylesheet" href="mobile.css" type="text/css" />');
	} else{
		$('#firstRow').parallax({
			imageSrc: 'ihttp://lorempixel.com/output/city-q-c-1920-1920-2.jpg',
			position: "0px 55px",
			speed: "1.7"
		});

		$('#secondRow').parallax({
			imageSrc: 'http://lorempixel.com/output/transport-q-g-1920-1920-2.jpg',
			position: "0px 276px",
			speed: "1.7"
		});
	}
	$('#menuRespBtn').click(function(event) {
		if( $('#menu').hasClass('close') ){
			$('#menu').removeClass('close');
			$('#menu').addClass('open');
		} else{ 
			if ( $('#menu').hasClass('open') ){
				$('#menu').removeClass('open');
				$('#menu').addClass('close');
			} else{
				$('#menu').addClass('open');
				$('#menu').removeClass('close');
			}
		}
	});
	if(($(window).innerWidth() >= widthLimitDesktop)){
		$('#menu').removeClass('close');
	}
	OrderElements();
});



function OrderElements(){
	returnDefaults();

	//If starts with less than 640px width, add menu button.
	
}




function StrictTextLength(txt, txtLength) {
	if(txt.length <...