JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="large-img"><img class="big-img" src=""></div>
    <div id="inner">
    <nav class="main-nav">
        <div class="menu-sub">
             <h2>Category 1</h2>
            <ul>
                <li class="img">
                    <img src="http://lorempixel.com/1920/1080/" alt="" />
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/g/1920/1080/" alt="">
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/1920/1080/sports" alt="">
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/g/1920/1080/sports" alt="">
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/1920/1080/cats" alt="">
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/g/1920/1080/cats" alt="">
                </li>
            </ul>
        </div>
        <div class="menu-sub">
             <h2>Category 2</h2>
<ul>
                <li class="img">
                   <img src="http://lorempixel.com/1920/1080/" alt="" />
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/g/1920/1080/" alt="">
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/1920/1080/sports" alt="">
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/g/1920/1080/sports" alt="">
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/1920/1080/cats" alt="">
                </li>
                <li class="img">
                    <img src="http://lorempixel.com/g/1920/1080/cats" alt="">
                </li>
            </ul>
        </div>
        <div class="menu-sub">
             <h2>Category 3</h2>
<ul>
     ...

CSS

#container{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
}
#large-img{
    width: 100%;
    min-height: 800px;
    height: 100%;
}
#inner{
    position: absolute;
    top: 0;
    background: transparent;
    width: 100%;
}
.big-img{
    width: 100%;
    height: auto;
}
li{
    display: inline-block;
    width: 10%;
}
li>img{
    width: 100%;
}
ul{
    list-style-type: display: none;
    overflow: hidden;
    width: 200%;
    display: none;
}
h2{
    background: black;
    opacity: 0.5;
    color: white;
    font-family: sans-serif;
    width: 20%;
    padding: 10px 0;
}

nav {
    width: 95%;
    overflow: hidden;
    border: 1px solid red;
    padding:0;
    margin:0;
}

JavaScript

$(document).ready(function(){
    var time=Date.now();
    //testing variable
    var $console = $('#console');
    //make menu items expand and colapse
    $('.menu-sub').hover(function(){
        $(this).children('ul').slideDown();
    }, function(){
        $(this).children('ul').slideUp();
    }                   
    );
    
    //update background img on click
    $('img').on('click', function() {
              var $tempSource = $(this).attr('src');
       $('.big-img').attr('src', $tempSource);
    });
    
    //scroll img's 
    $("nav").mousemove(function(e) {  
        if (time < Date.now() - 1000) {
            time = Date.now();
            var mX = e.offsetX;
        var width = $(this).width();
        var buffer = parseInt(width) / 3;
        var rightBuf = width - buffer;
        var leftBuf = rightBuf - buffer;
        if(mX > rightBuf){
            $('.menu-sub ul').animate({ "margin-left": "-=50" }, "slow" );
        }else if(mX < leftBuf){
            $('.menu-sub ul').animate({ "margin-left": "+=50" }, "slow" );          
        }else{
            
        }
        }
    });

});