JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.27/skrollr.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <body>

        <div id="header" data-0="position:fixed" >
        	<div class="label">

        		<div id="search-notice">
        			<h2> Some Words</h2><br />
        			<a class="btn btn-lg btn-outline" href="#" role="button">Do Something</a>
        		</div>
        	</div>
        </div>

		<nav class="navbar navbar-default" role="navigation" data-0="position:fixed; top:230px" data-565="position:fixed; top:0; width:100%;">
		  <div class="container-fluid">
		    <div class="navbar-header ">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">&nbsp;Brand name</a>
		    </div> <!--navbar-header-->

		        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

       <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
 		<li><a href="#">Link</a></li>
 		<li><a href="#">Link</a></li>
 		<li><a href="#">Link</a></li>
 		<li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
		  </div><!--container-fluid-->
		</nav>
    <div class="test" style="position:fixed; top:620px;" data-0="position:fixed; top:631px" data-565="position:fixed; top:50px; width:100%;">
        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br />
Typing        <br...

CSS

html, body{
	height:100%;
}

body{
		background-color: #dad6bd;
}

#header{

	height:581px;
	width:100%;
	background: url('../img/header-logo.png');
}
.test{
	background-color:#dad6bd; 
	width:100%;
}

.label{
	width: 100%;
	text-align: center;
	position: absolute;
	top:40px;
    background-color:green;
}

#header h2{
	color:#ffcc33;
	font-family: Roboto, sans-serif;
	font-weight: 300;
}

a.btn-outline{
	color:#fff;
	border-color: #fff;
	border:1px solid #fff;
}

a.btn-outline:hover{
	color:#006666;
	border-color: #fff;
	border:1px solid #fff;
	background-color: #ffffff;
}

#search-notice{
margin-top: 90px;
}

.container-fluid .navbar-header .navbar-brand{
	margin-left: 0px;
	padding:4px 4px;
}

JavaScript

var s = skrollr.init();