JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="top">
    <div class="programming">Programming<br/>(click me)</div>
<div>OS</div>
<div>Databases</div>
</div>

<div id="programming">
    <div class="web">Web<br/>(click me)</div>
<div>Windows</div>
<div>iOS</div>
</div>

<div id="web">
    <div class="php-ver">PHP<br/>(click me)</div>
<div>jQuery</div>
<div>ASP</div>
</div>

<div id="php-ver" class="last">
    <h5>This wouldn't be a zone but a tag</h5>
<div>PHP v5.0</div>
<div>PHP v5.1</div>
<div>PHP v5.2</div>
<div>PHP v5.3</div>
</div>
    </div>

CSS

#container > div{
    display:none;
        text-align:center;
}
div#top{
    display:block
}
#container > div div{
    border:1px solid blue;
    float:left;
width:100px;
height:50px;
    margin-right:20px;
}

JavaScript

$("#container div div").click(function(){
    $(this).css({"background":"green","color":"#fff"})
$("#"+$(this).prop("class")).fadeIn()  
})