JSFiddle - React, Tailwind, and code Playground

by alano

HTML

<ul class= "menuInferior">
<!-- START CONTAINER RUBRO -->
 <li class="contenedorMenuInf" id= "contenedorRubro">
  <ul class="contenedor">   
    <li><div class="contMenuInf" id="contMenuInf_r1-c0-sC0">
        
      <ul class= "menuInferior">
      <!-- START CONTAINER CATEGORIA -->
        <li class="contenedorMenuInf" id= "contenedorCategoria">
          <ul class="contenedor">   
            <li><div class="contMenuInf" id="contMenuInf_r1-c1-sC0">
            one:A
            </div></li>
            <li><div class="contMenuInf" id="contMenuInf_r1-c2-sC0">
            one:B
            </div></li>
            <li><div class="contMenuInf" id="contMenuInf_r1-c3-sC0">
            one:C
            </div></li>
          </ul>   
        </li>
      <!-- END CONTAINER CATEGORIA -->
      <!-- START BUTTON CATEGORIA -->    
        <li class="botonMenuInf" id="botonCategoria">
          <ul class="boton">   
            <li id="botMenuInf_r1-c1-sC0">one:A</li>
            <li id="botMenuInf_r1-c2-sC0">one:B</li>    
            <li id="botMenuInf_r1-c3-sC0">one:C</li>
          </ul>   
        </li>
      <!-- END BUTTON CATEGORIA -->    
      </ul>         
   
    </div></li>
    <li><div class="contMenuInf" id="contMenuInf_r2-c0-sC0">
    two
    </div></li>
    <li><div class="contMenuInf" id="contMenuInf_r3-c0-sC0">
    three
    </div></li>
    <li><div class="contMenuInf" id="contMenuInf_r4-c0-sC0">
    four
    </div></li>
    <li><div class="contMenuInf" id="contMenuInf_r5-c0-sC0">
    five
    </div></li>
  </ul>   
 </li>
<!-- END CONTAINER RUBRO --> 
<!-- START BUTTON RUBRO -->    
 <li class="botonMenuInf" id="botonRubro"><!-- inicio botonRubro -->
  <ul class="boton">   
    <li id="botMenuInf_r1-c0-sC0">one</li>
    <li id="botMenuInf_r2-c0-sC0">two</li>    
    <li id="botMenuInf_r3-c0-sC0">three</li>
    <li id="botMenuInf_r4-c0-sC0">four</li>
    <li id="botMenuInf_r5-c0-sC0">five</li>
  </ul>   
 </li>
<!-- END BUTTON RUBRO -->    
</ul>

CSS

/* START GENERAL */
ul.menuInferior:first-child {   
    margin-left:100px; 
}
ul.menuInferior li#botonRubro > ul,
ul.menuInferior li#botonCategoria > ul{    
    font:17px arial,sans-serif;    
    position:absolute;
    padding:5px 0;
    width:300px;                                
}
ul.menuInferior li#botonRubro > ul > li,
ul.menuInferior li#botonCategoria > ul > li{
    display: inline;
    cursor:pointer;        
    text-align:center;
    letter-spacing:1px;        
    padding:5px;        
    margin-right:-5px;            
}
ul.menuInferior li#botonRubro > ul > li.activeFborde{
    display: inline;
    height:11px;    
    padding:0 5px;    
    border-right:1px solid  #000;                       
}
ul.menuInferior li#botonRubro > ul > li.activeFcolor {
    border-left:1px solid  #000; 
    border-right:1px solid  #000;         
}
ul.contenedor > li > div {
    display: none;
    position:absolute;    
}
/* END GENERAL */

/* START RUBRO */
ul.menuInferior li#botonRubro > ul{    
    margin-top:250px;
    margin-left:-80px;    
    background-color: #666;                       
}
ul.menuInferior li#botonRubro > ul > li{    
    color:#CCC;           
}
ul.menuInferior li#botonRubro > ul > li:hover{    
    color: #FFF;           
}
ul.menuInferior li#botonRubro > ul > li.activeFcolor {    
    background-color:#FC0; 
    color:#000;
    padding:6px 5px;        
}
ul.menuInferior #contenedorRubro ul.contenedor > li > div  {
    margin-top:3px;
    margin-left:-90px;
    width:450px;
    height:233px;    
    z-index:1;
    background-color:#F00;
}
/* END RUBRO */

/* START CATEGORIA */
ul.menuInferior li#botonCategoria > ul{    
    margin-top:200px;
    margin-left:-90px;
    background-color:#FFF;
    border:1px solid  #000;                        
}
ul.menuInferior li#botonCategoria > ul > li{    
    color: #4D4D4D;            
}
ul.menuInferior li#botonCategoria > ul > li:hover{    
    color: #000;          
}
ul.menuInferior li#botonCategoria > ul...

JavaScript

$(document).ready(function(){ 

 $('li.contenedorMenuInf').find('ul.contenedor li:first-child > div').show();//first container activated by default
 $('.botonMenuInf li:first-child').addClass('activeFcolor'); //color of the first default button
 $('.botonMenuInf li').not('li:first-child').addClass('activeFborde');//edges  by default
 
  $('.botonMenuInf ul.boton > li').click(function () { 
    var idBoton    =  $(this).attr('id').substr(11);//extract id attribute
    var botonSelecc    =  $('div[id=contMenuInf_'+idBoton+']');//selected button
    var botonDesact    =  $('[id^=contMenuInf_]').closest('li').parent('li').siblings();//buttons disabled
    
   $(this).closest('ul.boton').children('.botonMenuInf li').removeClass('activeFcolor').removeClass('activeFborde');   
   $('li[id=botMenuInf_'+idBoton+']').addClass('activeFcolor');
   $('li[id^=botMenuInf_]').not($(this).prev()).addClass('activeFborde');
   
  $(botonDesact).not(botonSelecc).hide();
  $(botonSelecc).show();  
 
    return false;      
  });

   
});