JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="js_nav" class="nav">
    <li>最初のコンテンツ</li>
    <li>２番目のコンテンツ</li>
    <li>３番目のコンテンツ</li>
    <li>４番目のコンテンツ</li>
    <li>最後のコンテンツ</li>
</ul>

<div class="contents">
    <div>
        <h3>dummy</h3>
        <p>dummy dummydummy dummydummydummydummy dummy dummy</p>
    </div>
    <div>
        <h3>dummy</h3>
        <p>dummy dummydummy dummydummydummydummy dummy dummy</p>
    </div>
    <div>
        <h3>dummy</h3>
        <p>dummy dummydummy dummydummydummydummy dummy dummy</p>
    </div>
    <div>
        <h3>dummy</h3>
        <p>dummy dummydummy dummydummydummydummy dummy dummy</p>
    </div>
    <div>
        <h3>dummy</h3>
        <p>dummy dummydummy dummydummydummydummy dummy dummy</p>
    </div>
</div>

SCSS

@import "http://db.tt/9AQJciWR"

html {
    font-size: 100%;
}

body {
    font-family: "BLOKKRegular", serif;
    font-size: 15px;
    position: relative;
}

.nav {
    position: fixed;
    top: 1em;
    right: 2em;
    list-style: none;
    line-height: 1.3;
}

.nav > li {
    cursor: pointer;
    padding: .3em;
    border: 1px solid #3c3c3c;
    &:hover {
        background-color: #3c3c3c;
    }
}

.contents {
    margin-top: 13em;
    line-height: 1.7;
}

.contents > div:first-of-type {
    margin-left: 10em;
}

.contents > div {
    float: left;
    display: inline;
    margin-right: 20em;
    width: 30em;
}

h3 {
    font-size: 2em;
}

p {
    word-wrap: break-word;
}

JavaScript

$(function() {
    /* 横幅を計算する */
    var width = function() {
        var sum = 0
        $(".contents > div").each(function(idx, elm) {
            sum += $(elm).outerWidth(true);
        });
        return sum;
    }
    
    /* 最初の要素なら最も左まで、違うならその要素のoffset().leftの値までスクロール */
    var scroll = function(idx) {
        var $target = $(".contents > div:eq(" + idx + ")");
        var pointer = function(idx) {
            return (idx != 0)? $target.offset().left : 0
        }(idx);
        $("html, body").animate({
            scrollLeft: pointer
        }, 500);
    };
    
    $("body").css("width", width());
    $("#js_nav > li").each(function(idx, elm) {
        $(elm).on("click", function() {
            scroll(idx);
        });
    });
});