JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://aliensix.com/lightningbolt/css/bootstrap.min.css">
<script src="http://aliensix.com/lightningbolt/js/bootstrap.min.js"></script>
<script src="http://aliensix.com/lightningbolt/js/jquery.easing.1.3.js"></script>
<script src="http://aliensix.com/lightningbolt/js/jquery.quicksand.js"></script>
<script src="http://aliensix.com/lightningbolt2/js/portfolio.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
	<!-- Begin Hero -->
	<div class="jumbotron hero clearfix" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target=".ticker h1">

		<!-- Content -->
		<div class="container center-vertically">
			<div data-center="opacity: 1" data-top="opacity: 0" data-anchor-target=".hero h1">
				<hr>
				<p>We are Bolt & we like to <em>focus</em> on</p>
				<div class="ticker">
					<h1>Websites</h1>
					<h1>Applications</h1>
					<h1>User Interfaces</h1>
				</div>
				<hr>
			</div>
		</div>

	</div>
	<!-- End Hero -->

	<!-- Begin Navigation -->
	<div class="navbar">

		<div class="container">

			<!-- Brand -->
			<a href="javascript:void(0);" class="navbar-brand scroll-top"><img class="logo" width="45" height="45" alt="lightning bolt logo" src="img/logo.png"></img></a>

			<!-- Mobile Navigation -->
			<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
				<span class="ion-navicon toggle-icon"></span>
			</button>

			<!-- Main Navigation -->
			<div class="collapse navbar-collapse navHeaderCollapse" id="myScrollSpy">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#section1" data-id="section1" class="scroll-link">Home</a></li>
					<li><a href="#section2" data-id="section2" class="scroll-link">Portfolio</a></li>
					<li><a href="#section3" data-id="section3" class="scroll-link">About</a></li>
					<li><a href="#section4" data-id="section4" class="scroll-link">Team</a></li>
					<li><a...

CSS

/* =Table of Contents
--------------------------------------------------------------
	=Common Styles
	=Typography
	=Buttons
	=Navigation
	=Hero Unit
	=Page Title
	=Call to Action
	=Summary
	=Portfolio
	=About
	=Quote
	=Team
	=Services
	=Contact
	=Footer
*/

/* =Common Styles
-------------------------------------------------------------- */
body {
	background:#fff;
	font: normal 18px "Open Sans", arial, sans-serif;
	font-weight: 300;
	color: #545454;
	height: 100%;
	width: 100%;
	line-height: 30px;
}

html {
	height: 100%;
}

body a {
	color: #969696;
}

body a:hover {
	color: #000;
	text-decoration: none;
	-webkit-transition: color 0.5s ease;
	-moz-transition: color 0.5s ease;
	-o-transition: color 0.5s ease;
	transition: color 0.5s ease;
}

.row {
	margin: 0;
}

.center-vertically {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

.no-padding {
   padding: 0 !important;
}

.no-margin {
	margin: 0 !important;
}

/* =Typography
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
	color: #272727;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: 1.17em;
	margin: 0 0 20px;
}

h1 {
	font-size: 3.5em;
	text-transform: uppercase;
}

h2 {
	font-size: 2.4em;
	text-transform: uppercase;
}

h3 {
	font-size: 30px;
	text-transform: uppercase;
}

h4 {
	font-size: 1.8em;
	text-transform: uppercase;
}

h5 {
	font-size: 21px;
	text-transform: uppercase;
}

h6 {
	font-size: 1em;
	text-transform: uppercase;
}

/* =Buttons
-------------------------------------------------------------- */
.bolt-button-send {
	border-radius: 0;
	border: 2px solid #272727;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 10px;
	background-color: transparent;
}

.bolt-button-send:hover, .bolt-button-send:focus {
	background-color: #272727;
	border-color: #272727;
	color: #fff;
	-webkit-transition: color 0.5s ease;
	-moz-transition: color 0.5s...