JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="bar"><div class="bartitle">GROSSE SAVEUR</div></div>
    <div id="main">
        <div id="maincontainer">
            <div class="itemcontainer active" id="item1">
                <div class="under">
                    <a class="left" href="#main"><div class="half"></div></a>
                    <a class="right" href="#item2"><div class="half"></div></a>
                </div>
                <div class="item">
                    <div class="itemcenter">
                        <div class="itemtitle">
                            ITEM 1
                        </div>
                        <div class="img active">
                            <img src="http://www.leminence.fr/images-article/timothy-j-reynolds/1_big.jpg"/>
                        </div>
                        <div class="img">
                            <img src="http://www.leminence.fr/images-article/timothy-j-reynolds/2_big.jpg"/>
                        </div>
                        <div class="img">
                            <img src="http://www.leminence.fr/images-article/timothy-j-reynolds/3_big.jpg"/>
                        </div>
                        <div class="img">
                            <img src="http://www.leminence.fr/images-article/timothy-j-reynolds/4_big.jpg"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="itemcontainer" id="item2">
                <div class="under">
                    <a class="left" href="#item1"><div class="half"></div></a>
                    <a class="right" href="#item3"><div class="half"></div></a>
                </div>
                <div class="item">
                    <div class="itemcenter">
                        <div class="itemtitle">
                            ITEM 2
                        </div>
                        <div class="img active">
                            <img...

CSS

@import url(http://fonts.googleapis.com/css?family=Mallanna);
@import url(http://fonts.googleapis.com/css?family=Raleway+Dots);

body, html {
    height: 100%;
    margin: 0;
}

#bar {
    z-index:90;
    position: fixed;
    width: 50px;
    height: 100%;
    background: #414C84;
    /*background: #333;*/
}

.bartitle {
    font-family: 'Mallanna', sans-serif;
    font-size: 40px;
    transform-origin: 5% 50% 0;
    transform: rotate(90deg);
    color: #E62E8A;
    width: 500px;
}

#main {
    z-index:10;
    padding-left: 50px;
    width: auto;
    height: 100%;
    /*background-color: #333;*/
    overflow: hidden;
    /*background-image: url(https://farm6.staticflickr.com/5211/5429637514_19c24f0151_o.jpg);
    background-image: url(https://s3.amazonaws.com/f.cl.ly/items/0r0K2d0a0a010O1B240X/pattern-wallpaper.png);
    background-image: url(http://cdn.superbwallpapers.com/wallpapers/abstract/polygon-26677-2560x1600.jpg);*/
    background-image: url(http://31.media.tumblr.com/ee2ff63eaa64dee7239fed8da5d2b9b9/tumblr_mh942qehLV1r46py4o1_1280.png);
    background-size: cover;
}

#maincontainer {
    z-index:20;
    height: 100%;
    text-align: center;
    white-space: nowrap;
}

.itemcontainer {
    z-index:30;
    position: relative;
    display: inline-block;
    height: 100%;
    width: 80%;
    overflow: hidden;
    margin: 0;
}

.item {
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width:100%;
    overflow: auto;
    padding-right:20px;
}

.itemcenter {
    height: 100%;
    margin: 0 auto;
}

.itemtitle {
    font-family: 'Mallanna', sans-serif;
    color: #E62E8A;
    /*color: #FF6699; */
    position:relative;
    z-index: 80;
    font-size: 50px;
    margin: 0 auto 0;
    padding-top: 5%;
    display: inline-block;
}

.under {
    position: relative;
    opacity: 0.4;
    z-index: 70;
    width: 100%;
    height: 100%;
}

.under a{
    display: block;
    height: 100%;
    width: 50%;
    float: left;
}

.under a.right {
    cursor:...

JavaScript

$('.under a').bind('click',function(event){
		var $anchor = $(this);
		$('#main').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left + $('#main').scrollLeft() - ($('#main').width() - $($anchor.attr('href')).width())/2 - $('#bar').width()
		}, 300);
        $('.itemcontainer.active').removeClass('active');
        $($anchor.attr('href')).addClass('active');
		event.preventDefault();
	});
    var busy = false;
    $(document).on('mousewheel DOMMouseScroll', function (e) {
        e.preventDefault();
        if (!busy) {
            busy = true;
            var active = $('.itemcontainer.active .item .active');
            var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
            console.log(delta);
            if (delta < 0) {
                next = active.next();
                console.log(next.text());
                if (next.length) {
                    
                        $('.itemcontainer.active .item').animate({
                            scrollTop: next.offset().top
                        }, 150);
                        
                        next.addClass('active')
                            .siblings().removeClass('active');
                }
            } else {
                prev = active.prev();
                if (prev.length) {
    
                        $('.itemcontainer.active .item').animate({
                            scrollTop: prev.offset().top
                        }, 150);
                        prev.addClass('active')
                            .siblings().removeClass('active');

                }
            }
            var timer = setTimeout(function () {
                busy = false;
                clearTimeout(timer);
            }, 200);
        }
    });