JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav nav-pills nav-justified nav-tabss">
            <li class="active">
              <a href="#">All</a>
            </li>
            <li>
              <a href="#">Branding</a>
            </li>
            <li>
              <a href="#">Advertise</a>
            </li>
            <li>
              <a 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

$('.nav-tabss').children('li').click(function(){

    var branding = $(this).text();

     if ( branding === "branding" )
     {
       	$('.branding').show();
        $('.adverise').hide();
        $('.print').hide()
     }

  });