JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content"></div>
        <div id="itemTwo" class="content"></div>
        <div id="itemThree" class="content"></div>
        <div id="itemFour" class="content"></div>
    </div>
</div>
<div id="navLinks">
    <ul>
        <li class="itemLinks"></li>
        <li class="itemLinks"></li>
        <li class="itemLinks"></li>
        <li class="itemLinks"></li>
    </ul>
</div>

CSS

#wrapper {
    width: 2200px;
    transform: translate3d(0, 0, 0);
    transition: transform .5s ease-in-out;
}
.content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
}
#contentContainer {
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}
#itemOne {
    background-color: #ADFF2F;
    background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
    background-color: #FF7F50;
    background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#navLinks {
    text-align: center;
    width: 550px;
}
#navLinks ul {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    margin-top: 6px;
}
#navLinks ul li {
    float: left;
    text-align: center;
    margin: 10px;
    list-style: none;
    cursor: pointer;
    background-color: #CCCCCC;
    padding: 5px;
    border-radius: 50%;
    border: black 5px solid;
}
#navLinks ul li:hover {
    background-color: #FFFF00;
}
#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
#navLinks ul li.active:hover {
    background-color: #484848;
    color: #FFFFFF;
}

JavaScript

$('.itemLinks').on('click', function () {
    $('.content').hide(); // hide all items with content class
    $('.content').eq($(this).index()).fadeIn(500); // display the content item using the index value of the list element
});