JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-sm-4 col-xs-4" id="nav">
        <ul class="nav list-group affix">
            <li class="list-group-item"><a href="#g1">Item 1</a></li>
            <li class="list-group-item"><a href="#g2">Item 2</a></li>
            <li class="list-group-item"><a href="#g3">Item 3</a></li>
            <li class="list-group-item"><a href="#g4">Item 4</a></li>
            <li class="list-group-item"><a href="#g5">Item 5</a></li>
        </ul>
    </div>
    <div class="col-sm-8 col-xs-8">
        <section id="g1">
            Content 1
        </section>
        
        <section id="g2">
            Content 2
        </section>
        
        <section id="g3">
            Content 3
        </section>
        
        <section id="g4">
            Content 4
        </section>
        
        <section id="g5">
            Content 5
        </section>
    </div>
</div>

CSS

section {
    height: 250px;
    background-color: #eee;
    padding: 10px;
    margin: 10px 0;
}

li.list-group-item:hover {
    background-color: #eee;
    cursor: pointer;
}

li.list-group-item.active > a,
li.list-group-item.active > a:hover,
li.list-group-item.active > a:focus {
  color: #fff;
  background-color: #428BCA;
}

JavaScript

$( document ).ready(function() {
    $('body').scrollspy({ 'target': '#nav', 'offset': 10 });
    
    $('#nav').on('activate.bs.scrollspy', function() {
		console.log('scroll spy!!')
	});
});