JSFiddle - React, Tailwind, and code Playground

by Okie Wardoyo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

	<header class="container">
	  <h1>HEADER HERE</h1>
	</header>
	
	<div class="container">
		<div class="col-sm-3 sidebar">
			<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="100">
				<li><a href="#">Section One</a></li>
				<li><a href="#">Section Two</a></li>
				<li><a href="#">Section Three</a></li>
				<li><a href="#">Section One</a></li>
				<li><a href="#">Section Two</a></li>
				<li><a href="#">Section Three</a></li>
				<li><a href="#">Section One</a></li>
				<li><a href="#">Section Two</a></li>
				<li><a href="#">Section Three</a></li>
				<li><a href="#">Section One</a></li>
				<li><a href="#">Section Two</a></li>
				<li><a href="#">Section Three</a></li>
			</ul>
		</div>

		<div class="col-sm-9 content">
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		  <p>Content</p>
		 ...

CSS

.sidebar {
      background-color:yellow;
    }
	
	.affix {
      top: 0;
	  background-color:yellow;
	}
	
	body{
		background-color:white;
	
	}
  
	header{
		background-color:green;
		text-align:center;
		height:100px;
	}
    
    footer {
      background-color:blue;
      color: white;
    }
	
	.content{
		background-color:red;
	}