JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainContainer">
    
    <div class="container blue" id="homeContainer">
    </div>
    <div class="menuDiv"><!--
            --><div class="menuItem" id="menuHomeButton" ng-class="{'active':selectedTab === 'home'}" ng-click="selectedTab = 'home'">
        <div class="menuTextDiv"><p>Home</p></div><div class="menuItemColor blue"></div>
    </div><!--
            --><div class="menuItem" id="menuAboutButton" ng-class="{'active2':selectedTab === 'about'}" ng-click="selectedTab = 'about'">
        <div class="menuTextDiv"><p>About</p></div><div class="menuItemColor blue2"></div>
    </div><!--
            --><div class="menuItem" id="menuPortfolioButton" ng-class="{'active3':selectedTab === 'portfolio'}" ng-click="selectedTab = 'portfolio'">
        <div class="menuTextDiv"><p>Portfolio</p></div><div class="menuItemColor blue3"></div>
    </div><!--
            --><div class="menuItem" id="menuContactButton" ng-class="{'active4':selectedTab === 'contact'}" ng-click="selectedTab = 'contact'">
        <div class="menuTextDiv"><p>Contact</p></div><div class="menuItemColor blue4"></div>
    </div><!--
        --></div>
    <div class="container blue2" id="aboutContainer">
    </div>
    <div class="container blue3" id="portfolioContainer">
    </div>
    <div class="container blue4" id="contactContainer">
    </div>
    <div class="container">
    </div>
    
</div>

CSS

.mainContainer {
    height: auto;
}

.container {
    width: 100vw;
    height: 50vh;
    overflow: hidden;
}

.blue {
    background-color: #017BA6;
}

.blue2 {
    background-color: #02b2ec;
}

.blue3 {
    background-color: #016383;
}

.blue4 {
    background-color: #014b64;
}

.menuDiv.fixed {
    position: fixed;
    top: 0;
    z-index: 9999;
}

.menuDiv {
    height: auto;
    position: absolute;
    margin-top: 0;
    overflow: hidden;
    background-color: #ffffff;
    z-index: 9999;
    width: 100%;
}

.menuItem {
    height: 5vw;
    margin: 0;
    display: inline-block;
    position: relative;
    width: 25%;
    cursor: pointer;

}

.menuItem:hover .menuTextDiv>p {
    color: #da7071;
}

.active {
    background-color: #017BA6;
}

.active2 {
    background-color: #02b2ec;
}

.active3 {
    background-color: #016383;
}

.active4 {
    background-color: #014b64;
}



.menuTextDiv {
    height: 4vw;
    margin:0;
    border-right: solid 1px #ffffff;
    border-left: solid 1px #ffffff;
}

.menuTextDiv > p {
    text-align: center;
    vertical-align: middle;
    line-height: 4vw;
    margin: 0 auto 0 auto;
    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
    font-size: 2vw;
    color: #000000;
}

.menuItemColor {
    height: 1vw;
    margin: 0;
    border-right: solid 1px #ffffff;
    border-left: solid 1px #ffffff;

}

JavaScript

$(window).on('scroll', function () {
            if ($(window).scrollTop() >= $('#homeContainer').height()) {
                $('.menuDiv').addClass('fixed');
            } else {
                $('.menuDiv').removeClass('fixed');
            }
        });


$("#menuHomeButton").click(function(e){
            $('html, body').animate({
                scrollTop: $('#homeContainer').offset().top
            }, 'slow');
        });

        $("#menuAboutButton").click(function(e){
            $('html, body').animate({
                scrollTop: $('#aboutContainer').offset().top + 1
            }, 'slow');
        });

        $("#menuPortfolioButton").click(function(e){
            $('html, body').animate({
                scrollTop: $('#portfolioContainer').offset().top - $('.menuDiv').height() + 1
            }, 'slow');
        });

        $("#menuContactButton").click(function(e){
            $('html, body').animate({
                scrollTop: $('#contactContainer').offset().top - $('.menuDiv').height() + 1
            }, 'slow');
        });