JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<li><a class="sc" href="javascript:void(0)">1<i class="fa fa-home"></i></a></li>
<li><a class="sc" href="javascript:void(0)">2<i class="fa fa-graduation-cap"></i></a></li>
<li><a class="sc" href="javascript:void(0)">3<i class="fa fa-list"></i></a></li>
<li><a class="sc" href="javascript:void(0)">4<i class="fa fa-envelope"></i></a></li>

<div class="section section0">
  <h1>Section 1</h1>
</div>


<div class="section section1 hide">
  <h1>Section 4</h1>
</div>

<div class="section section2 hide">
  <h1>Section 3</h1>
</div>

<div class="section section3 hide">
  <h1>Section 4</h1>
</div>

CSS

body {
    overflow: hidden;
}
.section {
	width: 100vw;
	position: absolute;
	left: 0px;
	top: 100px;
	bottom: 0;
	right: 0;
	background: #332F3E;
	overflow-y:auto;
}


.section0 {
	background: #64B6B1 !important;
}

.section1 {
	background: #CE534D !important;
}

.section2 {
	background: #E6C973 !important;
}

.section3 {
	background: #DED4B9 !important;
}

.hide {
	left:100vw !important;
	position: absolute !important;
}

JavaScript

var active = 0;
$(".sc").each(function(index) {

    $(this).on("click", function() {
        if (active == index) {
            return;
        }

				$('.section' + active).animate({
            left: '100vw'
        }, 500, function() {
            $('.section' + active).addClass('hide');
            $('.section' + active).attr('style', '');

            $('.section' + index).removeClass('hide').css('left', '100vw');
            $('.section' + index).animate({
                left: '0'
            }, 500, function() {
                $('.section' + index).attr('style', '');
                active = index;
            });
        });

    });
});