JSFiddle - React, Tailwind, and code Playground

HTML

<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 id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img...

CSS

#first
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;
     
}
#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;
     
}
#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;
     
}
#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

$(document).on('click','#item1', function()
{ 
    $("#second. #third").fadeOut(2000, function(){
        $("#first").fadeIn(6000);
    });

});


$(document).on('click','#item2', function()
{ 
    $("#first, #third").fadeOut(2000, function(){
        $("#second").fadeIn(6000);
    });
});


$(document).on('click','#item3', function()
{ 
    $("#first, #second").fadeOut(2000, function(){
        $("#third").fadeIn(6000);
    });
});