JSFiddle - React, Tailwind, and code Playground

by Bala_chandran

HTML

<ul id="ul-menu-list">
    <li id="tabone">How it Works</li>
    <li id="tabtwo">Features</li>
    <li id="tabthree">FAQ</li>
</ul>
<di id="box-one" class="box">Tab one</di>
<di id="box-two" class="box">Tab two</di>
<di id="box-three" class="box">Tab three</di>

CSS

#box-one {
    display: block;
    width:200px height:200px;
    background:green;
}
#box-two {
    display: none;
    width:200px height:200px;
    background:blue;
}
#box-three {
    display: none;
    width:200px height:200px;
    background:gray;
}

JavaScript

$("#ul-menu-list li").click(function () {
    $('.box').hide().eq($(this).index()).show();
});