JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    
<body>
<div class="content container_12">
<div class="box grid_12">
        <div class="box-head">
            <a name="1-SP" class="section">&nbsp;</a>
            <ul class="box-head-nav">
                <li><a href="#1-SP" class="head-nav-button nav_1-SP active">1. SP.</a></li>
                <li><a href="#2-SP" class="head-nav-button nav_2-SP">2. SP.</a></li>
                <li><a href="#3-SP" class="head-nav-button nav_3-SP">3. SP.</a></li>
            </ul>
            <h2>HEADLINE 1</h2>
        </div>
        <div class="box-content">
            CONTENT BOX 1
        </div>
</div>


<div class="box grid_12">
        <div class="box-head">
            <a name="2-SP" class="section">&nbsp;</a>
            <ul class="box-head-nav">
                <li><a href="#1-SP" class="head-nav-button nav_1-SP ">1. SP.</a></li>
                <li><a href="#2-SP" class="head-nav-button nav_2-SP ">2. SP.</a></li>
                <li><a href="#3-SP" class="head-nav-button nav_3-SP ">3. SP.</a></li>
            </ul>
            <h2>HEADLINE 2</h2>
        </div>
        <div class="box-content">
            CONTENT BOX 2
        </div>
</div>


<div class="box grid_12">
        <div class="box-head">
            <a name="3-SP" class="section">&nbsp;</a>
            <ul class="box-head-nav">
                <li><a href="#1-SP" class="head-nav-button nav_1-SP">1. SP.</a></li>
                <li><a href="#2-SP" class="head-nav-button nav_2-SP">2. SP.</a></li>
                <li><a href="#3-SP" class="head-nav-button nav_3-SP">3. SP.</a></li>
                <span style="clear:both;"></span>
            </ul>
            <h2>HEADLINE 3</h2>
        </div>
        <div class="box-content">
            CONTENT BOX 3
        </div>
</div>
</div>
</body>
</html>

CSS

body {
background: #D8D6D8;
min-width: 320px;
}
.box {
margin-bottom: 20px;
border-radius: 3px;
width:400px;
}
.box-head {
background: #555;
max-height: 40px;
}
.box-head h2 {
padding: 10px 10px;
color: #ddd;
font-size: 14px;
}
.box-head-nav
{
float:right;
margin-right:10px;
}
.box-head-nav li
{
float: left;
padding: 8px 5px 0 0;
margin: 0px;
}
.head-nav-button {
padding: 2px 14px 3px 14px;
margin-right: 5px;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
color: #292929;
height: 28px;
max-height: 40px !important;
background: #dbdbdb; 
border: 1px solid #ababab;
}
.head-nav-button:hover { 
padding: 2px 14px 3px 14px;
margin-right: 5px;
cursor: pointer;
font-size: 14px !important;
font-weight: 600 !important;
font-family: 'Open Sans', sans-serif !important;
color: #292929;
text-shadow: 0 1px 0 rgba(255, 255, 255, 1.5);
height: 28px;
max-height: 40px !important;
background: url(../_img/bg2.png) #c2c2c2; 
border: 1px solid #ababab;
}
.head-nav-button:active {
box-shadow: inset 0 0 1px 0 rgba(0,0,0, 0.7);
}
.head-nav-button.active {
background:red; 
border: 1px solid #ababab;
}
.head-nav-button.active:hover {
}
.grid_12 {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}

.content {
padding: 20px 0;
}
.container_12 {
margin-left: 2%;
margin-right: 2%;
width: 98%;
}

.box-content {
background: #eee;
border: 1px solid #bbb;
border-top: none;
padding: 20px 20px 30px 20px;
height:700px;
}

.section {
position:absolute;
}

JavaScript

$(function(){
    var sections = {},
        _height  = $(window).height(),
        i        = 0;
    
    //// Grab positions of our sections
    $('.section').each(function(){
        sections[this.name] = $(this).offset().top;
    });

    $(document).scroll(function(){
        var $this = $(this),
            pos   = $this.scrollTop();
            
        for(i in sections){
            if(sections[i] > pos && sections[i] < pos + _height){
                $('a').removeClass('active');
                $('.nav_' + i).addClass('active');
            }  
        }
    });
    
    $('.head-nav-button').click(function()
    {
        $('a').removeClass('active');
        $('.nav_' + $(this).attr('href').replace('#', '')).addClass('active');
    });
});