JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <header>
        <ul>
            <li><a href="#" class="nav-link" data-page="#startseite">startseite</a>

            </li>
            <li><a href="#" class="nav-link" data-page="#webcams">webcams</a>

            </li>
            <li><a href="#" class="nav-link" data-page="#staffeltriathlon">staffeltriathlon</a>

            </li>
            <li><a href="#" class="nav-link" data-page="#impressum">impressum</a>

            </li>
        </ul>
        <div id="nav-slider"></div>
    </header>
    <div id="content">
        <div id="viewport" data-active="#startseite">
            <div id="startseite" class="page">
                 <h1>Startseite</h1>

            </div>
            <!-- /#page-startseite -->
            <div id="webcams" class="page">
                 <h1>Webcams</h1>

            </div>
            <!-- /#page-webcams -->
            <div id="staffeltriathlon" class="page">
                 <h1>Staffeltriathlon</h1>

            </div>
            <!-- /#page-staffeltriathlon -->
            <div id="impressum" class="page">
                 <h1>Impressum</h1>

            </div>
            <!-- /#page-impressum -->
        </div>
        <!-- /#viewport -->
    </div>
    <!-- /#content -->
    <footer></footer>
</div>
<!-- /#main -->

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: rgba(240, 240, 240, 1);
    background-image: url('../../images/background-pattern.png');
}
#main {
    background-color: rgba(0, 0, 0, 0.05);
    height: 100%;
    margin: 0 auto;
    width: 900px;
}
header {
    background-color: rgba(0, 0, 0, 0.1);
    height: 70px;
    width: 100%;
}
header ul {
    list-style: none;
    margin: 0 auto;
}
header li {
    display: inline;
    float: left;
}
header a {
    color: rgba(34, 34, 34, 1);
    display: block;
    text-decoration: none;
    padding: 25px 20px;
}
header a:hover {
    background-color: rgba(0, 0, 0, 0.15);
}
#nav-slider {
    margin: 0 10px;
    position: absolute;
    width: 878px;
}
#content {
    background-color: rgba(0, 0, 0, 0.1);
    margin: 10px 1% 0 1%;
    overflow: hidden;
    width: 98%;
    height: 50%;
}

.page {
    width: 100%;
    height: 100%;
    display: none;
}

JavaScript

$(document).ready(function () {
    $("#startseite").css({
        'display': 'block'
    });

    $(".nav-link").click(function () {
        var page = $(this).data("page");
        var active = $("#viewport").data("active");
        $(active).slideUp(500, function () {
            $(active).css({
                'display': 'none'
            });
            $(page).slideDown(250);
            $("#viewport").attr("data-active", page);
            page = 0;
            active = 0;
        });
    });

    /*  $("#nav-slider").slider();*/
});