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();

$navlist.on('click', 'a', function() {
    var $li = $(this).closest('li').stop(true, true);
    var $sibs = $li.siblings().stop(true, true);
    $navlist.toggleClass('dummy');
    if ($navlist.hasClass('dummy')) {

        //*******************************************************
        //*** here do whatever is required when a tab is selected
        //******************************************************* 

        $sibs.animate({
            'opacity': 0
        }, 'fast', function() {
            $sibs.css({
                'opacity': 1
            }).addClass('hidden');
            var pos = $li.position();
            $li.animate({
                marginLeft: pos1.left - pos.left,
                marginTop: pos1.top - pos.top
            }, 'slow');
        });
    }
    else {

        //*********************************************************
        //*** here do whatever is required when a tab is deselected
        //*********************************************************

        $li.animate({
            marginLeft: 0,
            marginTop: 0
        }, 'slow', function() {
            $sibs.css({
                'opacity': 0
            }).removeClass('hidden').animate({
                'opacity': 1
            }, 'fast');
        });
    }
    return false;
});


//Slideshow
$('.fadein img:gt(0)').hide();
setInterval(function() {
    $('.fadein :first-child').fadeOut(1000).next('img').fadeIn(4000).end().appendTo('.fadein');
}, 3500);