JSFiddle - React, Tailwind, and code Playground

HTML

<span></span>

<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1" onclick="checklist(this)">
            <button>A</button>
        </li>
        <li id="item2">
            <button>B</button>
        </li>
        <li id="item3">
            <button>C</button>
        </li>
        <li id="item4">
            <button>D</button>
        </li>
        <li id="item5">
            <button>E</button>
        </li>
        <li id="item6">
            <button>F</button>
        </li>
        <li id="item7">
            <button>G</button>
        </li>
        <!-- <li> <input type="button" value="animation" OnClick="checklist(this)"> </input>
  </li>-->
    </ul>
</div>
<div id="first">
    <img id="image1" src="http://placehold.it/350x150" />
    <img id="image2" src="http://placehold.it/350x150" />
    <img id="image3" src="http://placehold.it/350x150" />
    <img id="image4" src="http://placehold.it/350x150" />
    <img id="image5" src="http://placehold.it/350x150" />
    <img id="image6" src="http://placehold.it/350x150" />
    <img id="image7" src="http://placehold.it/350x150" />
    <img id="image8" src="http://placehold.it/350x150" />
    <img id="image9" src="http://placehold.it/350x150" />
    <img id="image10" src="http://placehold.it/350x150" />
</div>
<div id="second">
    <img id="image1" src="http://placehold.it/350x150" />
    <img id="image2" src="http://placehold.it/350x150" />
    <img id="image3" src="http://placehold.it/350x150" />
    <img id="image4" src="http://placehold.it/350x150" />
    <img id="image5" src="http://placehold.it/350x150" />
    <img id="image6" src="http://placehold.it/350x150" />
    <img id="image7" src="http://placehold.it/350x150" />
    <img id="image8" src="http://placehold.it/350x150" />
    <img id="image9" src="http://placehold.it/350x150" />
    <img id="image10" src="http://placehold.it/350x150" />
</div>
<div id="third">
    <img id="image1" src="http://placehold.it/350x150" />
    <img...

CSS

#first {
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;
    position: absolute;
}
#first img {
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
    cursor: pointer;
}
#second {
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;
    position: absolute;
}
#second img {
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
    cursor: pointer;
}
#third {
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;
    position: absolute;
}
#third img {
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
    cursor: pointer;
}
li {
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 180px;
    text-align:right;
    border-style: none;
}
.menu {
    width:150px;
    height: 350px;
}
.menu li {
    position: relative;
    top:150px;
    bottom: 0;
    left: 695px;
    right:0;
    margin: auto;
    border-style:none;
}

JavaScript

$('li').on('click', function() {
    //get last character of the li
    var lastChar = $(this).attr('id').slice(-1);
    //set which section to change based on the last character of the li's id

    if (lastChar == 1) {
        section = $('#first');
    }
    if (lastChar == 2) {
        section = $('#second');
    }

    if (lastChar == 3) {
        section = $('#third');
    }

    $('#first, #second, #third').not(section).fadeOut(1000, function() {
        $(section).delay(1200).fadeIn(1000);
    });
});