JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="nav nav-pills nav-justified nav-tabss">
<li class="active"> <a data-filter="all" class="trigger" href="#">All</a>
</li>
<li> <a data-filter="branding" class="trigger" href="#">Branding</a>
</li>
<li> <a data-filter="advertise" class="trigger" href="#">Advertise</a>
</li>
<li> <a data-filter="print" class="trigger" href="#">Print</a>
</li>
</ul>
<div class="branding">branding</div>
<div class="advertise">advertise</div>
<div class="print">print</div>
CSS
ul {
list-style:none;
}
li {
display:inline-block;
}
.branding {
height:100px;
margin:10px;
padding:10px;
width:200px;
background-color:#000;
float:left!important;
position:relative;
display:block;
top:100px;
color:#fff;
}
.advertise {
height:100px;
width:200px;
padding:10px;
background-color:#000;
margin:10px;
float:left!important;
position:relative;
display:block;
top:100px;
color:#fff;
}
.print {
height:100px;
width:200px;
background-color:#000;
float:left!important;
position:relative;
display:block;
margin:10px;
padding:10px;
top:100px;
color:#fff;
}
JavaScript
$('.trigger').click(function (e) {
e.preventDefault();
var branding = $(e.target).data('filter');
console.log(branding);
switch (branding) {
case "branding":
$('.branding').show();
$('.advertise').hide();
$('.print').hide();
break;
case "advertise":
$('.advertise').show();
$('.branding').hide();
$('.print').hide();
break;
case "print":
$('.advertise').hide();
$('.branding').hide();
$('.print').show();
break;
case "all":
$('.advertise').show();
$('.branding').show();
$('.print').show();
break;
default:
$('.branding').show();
$('.advertise').show();
$('.print').show();
}
});