JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<ul id="button">
    <li id="buttonAll" data-show="no" class="sub">All</li>
    <li id="buttonAsh" data-show="no" class="sub">Ashley</li> 
    <li id="buttonSi" data-show="no" class="sub">Simon</li> 
    <li id="buttonNat" data-show="no" class="sub">Nat</li> 
</ul>
<div class="clear"></div>
<ul>
    <li class="ash">Ash</li>
    <li class="si">Simon</li>
    <li class="nat">Nat2</li>
    <li class="si">Simon 2</li>
    <li class="nat">Nat</li>
    <li class="ash">Ash 2</li>
</ul>

<div id="result1">Result1: </div>
<div id="result2">Result2: </div>
<div id="result3">Result3: </div>

CSS

.clicked, .clicky {
    color: #bbb !important;
    background-color: #fff !important;
    transition: 1s;
}

.sub {  
    width: 80px;
    background-color: red;
    margin: 10px;
    padding: 5px 10px;
    transition: 1s;
    float: left;
    display: inline-block;
}

.hide {
    display:none;
    visibility:hidden;
}

#button {
    list-style-type: none;
    margin: 0;
    padding: 0 0 20px 0;
    display:block;
}
buttonAsh, buttonSi, buttonNat {

}

.clear {  
    clear:both;
}

JavaScript

$(document).ready(function(){
          
    $(document).on('click','#buttonAll',function() {
        if ($(this).data("show")=="no") {
            $('#buttonAll').addClass('clicked');
            $(this).data("show","yes");
        }   
        else {
            $('#buttonAll').removeClass('clicked');
            $(this).data("show","no");     
        }
    });
    
    $(document).on('click','#buttonAsh',function() {
        if ($(this).data("show")=="no") {
            $('#buttonSi').addClass('clicked');
            $('#buttonNat').addClass('clicked');
            
            $('.si').fadeOut('slow','linear');
            $('.nat').fadeOut('slow','linear');
            
            $(this).data("show","yes");
        }   
        else {
            $('#buttonSi').removeClass('clicked');
            $('#buttonNat').removeClass('clicked');
            
            $('.si').fadeIn('slow','linear');
            $('.nat').fadeIn('slow','linear');
            
            $(this).data("show","no");

        }
    });
    
    $(document).on('click','#buttonSi',function() {
        if ($(this).data("show")=="no") {
            $('#buttonAsh').addClass('clicked');
            $('#buttonNat').addClass('clicked');
            
            $('.ash').fadeOut('slow','linear');
            $('.nat').fadeOut('slow','linear');
            
             $('#buttonAsh').data("show","yes");
            $('#buttonNat').data("show","yes");
            $('#buttonSi').data("show","yes");
        }   
        else {
            $('#buttonSi').removeClass('clicked');
            
            $('.si').fadeIn('slow','linear');
            
            $('#buttonAsh').data("show","no");
            $('#buttonNat').data("show","no");
            $('#buttonSi').data("show","no");     
        }
    });
    
    $(document).on('click','#buttonNat',function() {
        if ($(this).data("show")=="no") {
            $('#buttonSi').addClass('clicked');
           ...