JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<div id="header">
    <h3>A big header area (400px high)</h3>
    <p>The bigger the header, the bigger the offset, the bigger the problem.</p>
</div>
<nav id="navigation" class="navbar" role="navigation">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
    </ul>
</nav>
<div id="content" data-spy="scroll" data-target="#navigation" data-offset="452">
    <div id="one">
        <h3>One</h3>
        <p>Section one content.</p>
    </div>
    <div id="two">
        <h3>Two</h3>
        <p>Section two content.</p>
    </div>
    <div id="three">
        <h3>Three</h3>
        <p>Section three content.</p>
    </div>
</div>

CSS

#header {
    border: 1px dashed #ccc;
    height: 400px;
    background-color: #ddd;
}

#navigation {
    margin-bottom: 0;
}

#navigation li.active a {
    background-color: #2a6496;
    color: #fff;
}

#content {
    height: 200px;
    overflow-y: auto;
}

#one {
    background-color: #fdd;
    height: 600px;
}

#two {
    background-color: #dfd;
    height: 200px;
}

#three {
    background-color: #ddf;
}