JSFiddle - React, Tailwind, and code Playground

by Dean Kamali

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"> Tab one </di>
<di id="box-two"> Tab two </di>
<di id="box-three"> 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

$(document).ready(function(){
  $("#tabone").click(function(){
        $('#box-one').css("display", "block");
        $('#box-two').css("display", "none");
        $('#box-three').css("display", "none");
  });
});

$(document).ready(function(){
  $("#tabtwo").click(function(){
        $('#box-one').css("display", "none");
        $('#box-two').css("display", "block");
        $('#box-three').css("display", "none");
  });
});

$(document).ready(function(){
  $("#tabthree").click(function(){
        $('#box-one').css("display", "none");
        $('#box-two').css("display", "none");
        $('#box-three').css("display", "block");
  });
});