JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <nav class='str'>
        <ul id='menu'>
            <li><a class='mmenu_btn' id='job'>Slide - 1</a></li>
            <li><a class='mmenu_btn' id='we'>Slide - 2</a></li>
            <li><a class='mmenu_btn' id='lab'>Slide - 3</a></li>
            <li><a class='mmenu_btn' id='touch'>Slide - 4</a></li>
            <li><a class='mmenu_btn' id='home'>home</a></li>
        </ul>
    </nav>

    <header class='str'></header>
    <article>
        <div id='shell'>
            <section id='home_content' class='content'>
                { home page }
            </section>
            <section id='job_content' class='content'>
                { slide_1 }
            </section>
            <section id='we_content' class='content'>
                { slide_2 }
            </section>
            <section id='lab_content' class='content'>
                { slide_3 }
            </section>
            <section id='touch_content' class='content'>
                { slide_4 }
            </section>
        </div>
    </article>
</div>

CSS

html, body {margin: 0;}
            html {height: 96%;}
            body {
                height: 96%;
                padding: 3% 3% 1%;}
            section, nav, aside, header,footer,article {display: block;}
            a {
                outline: none;
                color: black;}
            a:hover {color: red;}
            a:active {
                color: #2D0F0F;
                text-decoration: none;}
            #wrapper {
                position: relative;
                width: 50%;
                height: 100%;
                min-width: 450px;
            }
            header {
                position: relative;
                left: 100%;
                float: left;
                width: 100%;
                height: 33%;
                max-height: 350px;
                min-height: 150px;
                margin-right: -100%;
            }
            article {
                position: relative;
                clear: both;
                width: 200%;
                overflow: hidden;
            }
                #shell {
                    position: relative;
                    margin-top: 15px;
                }
            section {
                width: 100%;
                font-size: 200%;
            }
            .content {
                position: relative;    
                float: left;
                margin-right: -100%;
            }
            #home_content {
                left: 0;
                background-color: yellow}
            #job_content {
                left: 100%;
                background-color: yellowgreen;}
            #we_content {
                left: 200%;
                background-color: khaki;}
            #lab_content {
                left: 300%;
                background-color: purple;}
            #touch_content {
                left: 400%;
                background-color: maroon;}
            nav {
                float: left;
                margin-right: -100%;
               ...

JavaScript

$(function() {
        var    slider = $('#shell');
        $('#menu').on('click', 'a.mmenu_btn', function() {
                var    container = $('article').width(),
                    button = $(this),
                    target_id = this.id + '_content',
                    move = parseInt($('#' + target_id).css('left')),
                    result = Math.round(move/container*100)+'%';

            slider.animate({right: result}, 900)    
        })
    });