JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Status Bar -->
        <div class="genxcoders-status-bar">
        	<div class="genxcoders-left genxcoders-fc-white genxcoders-fw-500">
            	<span id="genxcoders-date"></span>
            </div>
            <div class="genxcoders-center">
            	Support: <i class="fa fa-phone"></i> +91-712-606 GENX
            </div>
            <div class="genxcoders-right">
            	<ul class="genxcoders-status-bar-social">
                	<a href="#"><li><i class="fa fa-facebook-f"></i></li></a>
                    <a href="#"><li><i class="fa fa-twitter"></i></li></a>
                    <a href="#"><li><i class="fa fa-linkedin"></i></li></a>
                    <a href="#"><li><i class="fa fa-youtube-play"></i></li></a>
                </ul>
            </div>
            <input type='text'>
        </div>
        <!-- Status Bar -->
        
        <!-- App Bar -->
        <div class="nav-container" id="navigation">
        	<div id="genxcoders" class="navbar navbar-default " role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header"><a class="navbar-brand" href="#">BlueGas</a>
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div...

CSS

body { 
	margin: 0px; 
	padding: 0px; 
	min-height: 100%; 
	background-color: #eeeeee; 
	font-family: 'Ubuntu', sans-serif;
	height: 1500px;
}

/* Status Bar */
.genxcoders-status-bar {
	width: 100%;
	height: 25px;
	
	background-color: #1976d2;
	
	position: fixed;
	top: 0;
	z-index: 9999;
}

.genxcoders-status-bar > .genxcoders-left, .genxcoders-status-bar > .genxcoders-center, .genxcoders-status-bar > .genxcoders-right {
	width: 33.33%;
	height: 25px;
	line-height: 25px;
	
	font-size: 12px;
	
	float: left;
	
	text-align: center;
	color: #ffffff;
}

.genxcoders-status-bar > .genxcoders-right > ul.genxcoders-status-bar-social {
	list-style: none;
	margin-left: -30px;
}
.genxcoders-status-bar > .genxcoders-right > ul.genxcoders-status-bar-social > a > li {
	color: #ffffff;
	display: inline-block;
	margin: auto 10px;
}
/* Status Bar */

/* App Bar */
.nav-container {
	margin-top:100px;
	
	width: 100%;
	height: 50px;
	
	
}
.nav-container > #genxcoders.navbar-default .navbar-brand {
    color: rgba(33, 33, 33, 1);
}
.nav-container > #genxcoders.navbar-default {
    font-size: 15px;
    /*background-color: rgba(255, 255, 255, 1);*/
	background-color: transparent;
    border-width: 0px;
    border-radius: 0px;
}
.nav-container > #genxcoders.navbar-default .navbar-nav>li>a {
    color: rgba(33, 33, 33, 1);
    /*background-color: rgba(255, 255, 255, 1);*/
	background-color: transparent;
}
.nav-container > #genxcoders.navbar-default .navbar-nav>li>a:hover,
.nav-container > #genxcoders.navbar-default .navbar-nav>li>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(3, 169, 244, 1);
}
.nav-container > #genxcoders.navbar-default .navbar-nav>.active>a,
.nav-container > #genxcoders.navbar-default .navbar-nav>.active>a:hover,
.nav-container > #genxcoders.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(25, 118, 210, 1);
}
.nav-container > #genxcoders.navbar-default .navbar-toggle {
    border-color:...

JavaScript

// Current Date
			var d = new Date();
			y = d.getFullYear();
			m = d.getMonth() + 1;
			dd = d.getDate();
			document.getElementById("genxcoders-date").innerHTML = d.toDateString();
			// Current Date
			
			// App Bar
			// Light Blue - #03A9F4
			// Dark Blue - #1976D2
			var elementPosition = $('#navigation').offset();
			$(window).scroll(function(){
				if($(window).scrollTop() > elementPosition.top){
					  $('#navigation').css('position','fixed').css('top','25');
					  $('.nav-container').css('margin-top','25px');
					  $('.nav-container > #genxcoders.navbar-default').css('background-color','#03A9F4');
					  $('.nav-container > #genxcoders.navbar-default .navbar-nav>li>a').css('color','rgba(255,255,255,1)');
					  $('.nav-container > #genxcoders.navbar-default .navbar-nav>li>a:hover').css('background-color','#1976D2','!important').css('color','#ffffff','!important');
				} else {
					$('#navigation').css('position','static');
					$('.nav-container').css('margin-top','100px');
					$('.nav-container > #genxcoders.navbar-default').css('background-color','transparent');
					$('.nav-container > #genxcoders.navbar-default .navbar-nav>li>a').css('color','rgba(33,33,33,1)');
					$('.nav-container > #genxcoders.navbar-default .navbar-nav>li>a:hover').css('color','rgba(255,255,255,1)');
				}    
			});
			// App Bar