JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="container">
        <div id="header">
            <p>This is the Header</p>
        </div>
        <div id="content_wrapper">
            <div id="slider">
                <div class="fadein">
                    <img src="slideshow/img1.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img2.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img3.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img4.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img5.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img6.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img7.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img8.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img9.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img10.jpg" width="700" height="250" alt=""/>
                </div>
            </div>
            <div id="navigation">
                <div id="navcontainer">
                    <ul id="navlist">
                        <li><a href="#">Home</a></li><!-- id="active"-->
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Partners</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div id="content"></div>
        </div>
        <div id="footer">
            <p>This is footer.</p>
        </div>
    </div>
</div>

CSS

.hidden {
  visibility: hidden;
}
#navlist {
  position: relative;
  margin-left:18%;
}
#navlist li {
  display: inline-block;
  list-style-type: none;
  padding: 15px;
  height: 400px auto;
  width: 75px auto;
  min-width: 75px;
  text-align: center;
  border: 1px solid #006699;
  background: #009999;
  position: relative;
}
#content {
  height: 565px;
  width: 75%;
  display: none; 
}

JavaScript

var $slider = $("#slider");
var $content = $("#content");
var $navlist = $("#navlist");
var pos1 = $("li", $navlist).eq(0).position();
var reset = {
    marginLeft: 0,
    marginTop: 0
};
var d = 'dummy',
    h = 'hidden',
    f = 'fast',
    s = 'slow',
    o0 = {
        'opacity': 0
    },
    o1 = {
        'opacity': 1
    };
$navlist.on('click', 'a', function() {
    var $li = $(this).closest('li').stop(true, true);
    var $sibs = $li.siblings().stop(true, true);
    $navlist.toggleClass(d);
    if ($navlist.hasClass(d)) { //nav tab selected
        $slider.hide();
        var page = this.href;
        var menuid = this.id;
        $content.load('' + page + '.php').removeClass().addClass(menuid).show("slide", {
            direction: "down"
        }, 1000);

        $sibs.animate(o0, f, function() {
            $sibs.css(o1).addClass(h);
            var pos = $li.position();
            $li.animate({
                marginLeft: pos1.left - pos.left,
                marginTop: pos1.top - pos.top
            }, s);
        });
    }
    else { //nav tab unselected 
        $slider.slideDown(f);
        $content.hide();
        $li.animate(reset, s, function() {
            $sibs.css(o0).removeClass(h).animate(o1, f);
        });
    }
    return false;
});
    $('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut(1000).next('img').fadeIn(4000).end().appendTo('.fadein');}, 3500);
/*  
$('.fadein img:gt(0)').not().hide();
*/