JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="bar"><div class="bartitle">TITLE</div></div>
    <div id="main">
        <div id="maincontainer">
            <div class="itemcontainer" id="item1">
                <div class="under">
                    <a href="#main"><div class="half"></div></a>
                    <a href="#item2"><div class="half"></div></a>
                </div>
                <div class="item">
                    <div class="itemcenter">
                        <div class="itemtitle">
                            ITEM 1
                        </div>
                        <div class="img">
                            IMG 1
                        </div>
                        <div class="img">
                            IMG 2
                        </div>
                        <div class="img">
                            IMG 3
                        </div>
                        <div class="img">
                            IMG 4
                        </div>
                    </div>
                </div>
            </div>
            <div class="itemcontainer" id="item2">
                <div class="under">
                    <a href="#item1"><div class="half"></div></a>
                    <a href="#item3"><div class="half"></div></a>
                </div>
                <div class="item">
                    <div class="itemcenter">
                        <div class="itemtitle">
                            ITEM 2
                        </div>
                        <div class="img">
                            IMG 1
                        </div>
                        <div class="img">
                            IMG 2
                        </div>
                        <div class="img">
                            IMG 3
                        </div>
                        <div class="img">
                            IMG 4
                        </div>
                    </div>
                </div>
            </div>
           ...

CSS

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

#bar {
    z-index:90;
    position: fixed;
    width: 50px;
    height: 100%;
    background: #59D;
}

.bartitle {
    font-size: 50px;
    transform-origin: 50% 50% 0;
    transform: rotate(90deg);
}

#main {
    z-index:10;
    padding-left: 50px;
    width: auto;
    height: 100%;
    background-color: #444;
    overflow-x: auto;
    overflow-y: hidden;
    overflow : -moz-scrollbars-horizontal;
}

#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%;
    /*background-color: #99A;*/
    margin: 0;
}

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

.itemtitle {
    position:relative;
    z-index: 80;
    font-size: 30px;
    color: #FFF;
    margin: 5% auto 0;
    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:hover {
    background: #778;
}

.item {
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width:100%
}

.img {
    position: relative;
    font-size: 40px;
    z-index: 80;
    max-width: 80%;
    height: auto;
    background: #fff;
    margin: 5% auto;
    padding: 1%;
    content:url(http://images.forwallpaper.com/files/thumbs/preview/26/266895__color-color-texture-wallpaper-background-wallpaper-background_p.jpg);
}

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);
        console.log($anchor.attr('href'));
        console.log($($anchor.attr('href')).offset().left + $('#main').scrollLeft() -                 ($('#main').width() - $($anchor.attr('href')).width())/2);
		event.preventDefault();
	});