JSFiddle - React, Tailwind, and code Playground

HTML

<div id='slider'>
    <ul>
        <li> 
            <a class='pride' href="i1.html"> Item 1 </a>
            <div class='info'> 
                <a class='roar' href="i1.html"> Description 2 </a>
            </div>
        </li>
        <li> 
            <a class='pride' href="i2.html"> Item 2 </a>
                        <div class='info'> 
                <a class='roar' href="i1.html"> Description 1 </a>
            </div>
        </li>
        <li>
            <a class='pride' href="i3.html"> Item 3 </a>
             <div class='info'> 
                <a class='roar' href="i1.html"> Description 3 </a>
            </div>
           </li>
        <li>
            <a class='pride' href="i4.html"> Item 4 </a> 
                        <div class='info'> 
                <a class='roar' href="i1.html"> Description 4 </a>
            </div>
         </li>
    </ul>
 <div>

CSS

#slider {
    width : 400px;
    height: 100px;
    border: 1px solid #bcd;
    background-color: #def;
    position:relative;
    z-index:0 !important;
}

#slider ul{
    margin:0px;
    padding:0px;
    list-style:none;
}

#slider ul li {
    margin:0px;
    padding:0px
    list-style:none;
    width:100px;
    z-index:10;
}
#slider ul li a.pride {
    color: #333;
    display: block;
    text-decoration: none;
    padding: 2px 0px 2px 10px;
}
#slider ul li.active a.pride,
#slider ul li:hover a.pride {
    background-color: #ffff7c;
}    

#slider ul li div.info {
    background-color: #9ab;
    border: 1px solid #ccc;
    display:none;
    position:absolute;
    right: 0;
    top:0;
    z-index:-5;
}
#slider ul li.active div.info,
#slider ul li:hover div.info {
    display:block;
}
#slider ul li div.info a.roar{
    color: #0a0;
    display:block;
    width: 280px;
    height: 80px;
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    z-index:10;
}

JavaScript

$("#slider ul li").mouseover(function(){
    $("#slider ul li").removeClass('active');
    $(this).addClass('active');
});