JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
	<body>
		<div class="header"></div>
		<div class="navbar navbar-default navbar-fixed-top shadow-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">Alternative Energy</a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="wind.html">Wind</a></li>
						<li><a href="solar.html">Solar</a></li>
						<li><a href="fuel.html">Biofuel &amp; Ethanol</a></li>
					</ul>
				</div><!--/.nav-collapse -->
			</div>
		</div>

		<div class="main-container container">
		<div class="col-md-12">
			<!-- Main component for a primary marketing message or call to action -->
			<ul class='tabs'>
				<li><a href='#tab1' id="tab1link" class="tablink"></a></li>
				<li><a href='#tab2' id="tab2link" class="tablink"></a></li>
				<li><a href='#tab3' id="tab3link" class="tablink"></a></li>
			</ul>
			<div id='tab1' class="tabcontent shadow-box">
				<p>Hi, this is the first tab.</p>
			</div>
			<div id='tab2' class="tabcontent shadow-box">
				<p>trouble</p>
			</div>
			<div id='tab3' class="tabcontent shadow-box">
				<p>And this is the 3rd tab.</p>
			</div>
		</div>
		</div> <!-- /container -->


		<!-- Bootstrap core JavaScript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/main.js"></script>
	</body>

CSS

html {
	height:2000px;
}
body {
	height:100%;
	background-color:#95D0F8;
}
.shadow-top {
	-webkit-box-shadow: 0 -10px 15px -8px #999;
	-moz-box-shadow: 0 -10px 15px -8px #999;
	box-shadow: 0 -10px 15px -8px #999;
}
.shadow-bottom {
	-webkit-box-shadow: 0 10px 15px -8px #999;
	-moz-box-shadow: 0 10px 15px -8px #999;
	box-shadow: 0 10px 15px -8px #999;
}
.shadow-box {
	-webkit-box-shadow: 5px 5px 12px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 12px 1px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 12px 1px rgba(0,0,0,0.5);
}
.header {
	height:350px;
	width:100%;
	margin-bottom:70px;
	overflow:hidden;
	background-image:url('../img/banner.jpg');
	background-repeat:no-repeat;
	background-position:top center;
}
.navbar {
	top: 350px;
	background-image:url('../img/bar.jpg');
	border:0;
}
li.active {
	background-color:#FFE249;
}
.jumbotron {
	background-color:#C7EAFE;
}
li.dropdown.open {
	background-color:#FFE249 !important;
}
.no-js .navbar {
	position: static;
}
.no-js .header {
	margin-bottom:0;
}
.nav {
	font-size:20px;
}
.icon-bar {
	background-color:#000000;
}
ul.tabs {
	list-style:none;
	background-color:#FFFFFF;
	width:100px;
	float:left;
	margin:0;
	padding:0;
}
ul.tabs li {
	height:30px;
}
ul.tabs a {
	display:block;
	width:100px;
	height:30px;
	font-size:20px;
	text-align:center;
}
ul.tabs img {
	vertical-align:baseline;
	padding:0;
	margin:0;
}
.tabcontent {
	margin-left:100px;
	min-height:90px;
	background-image:url('../img/tabs/tabcontent.png');
	padding:20px;
	font-size:25px;
	text-indent:50px;
	color:rgb(60,60,60);
}
#tab1link {
	background:url('../img/tabs/summary.jpg');
}
#tab1link:hover {
	background:url('../img/tabs/summary-hover.jpg');
}
#tab2link {
	background:url('../img/tabs/howto.jpg');
}
#tab2link:hover{
	background:url('../img/tabs/howto-hover.jpg');
}
#tab3link {
	background:url('../img/tabs/videos.jpg');
}
#tab3link:hover {
	background:url('../img/tabs/videos-hover.jpg');
}
.noindent {
	text-indent:0;
}
ol...

JavaScript

$(document).ready(function () {
	$('html').removeClass('no-js');
	$('.navbar').css('top', Math.max(0, 350 - $(this).scrollTop()));
	$('ul.tabs').each(function(){
		var $active, $content, $links = $(this).find('a');
		$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
		$active.addClass('active');
		$content = $($active.attr('href'));
		
		$links.not($active).each(function () {
			$($(this).attr('href')).hide();
		});

		$(this).on('click', 'a', function(e){
			$active.removeClass('active');
			$content.hide();
			$active = $(this);
			$content = $($(this).attr('href'));
			$active.addClass('active');
			$content.show();
			e.preventDefault();
		});
	});
});

$(window).on('scroll mousewheel DOMMouseScroll touchmove',function(){
    $('.navbar').css('top', Math.max(0, 350 - $(this).scrollTop()));
	var scroll = $(document).scrollTop();
	if (scroll >= 350) {
		$('.navbar').addClass('shadow-bottom');
	} else {
		$('.navbar').removeClass('shadow-bottom');
	}
});