JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<ul id="filter">
  <li><a href="#!" data-target="people">People</a></li>
  <li><a href="#!" data-target="animals">Animals</a></li>
  <li class="active"><a href="#!" data-target="object">Objects</a></li>
</ul>

<ul class="target" id="target">
  <li data-category="people">Johny</li>
  <li data-category="animals">frog</li>
  <li data-category="people">Mariuca</li>
  <li data-category="object">Ball</li>
  <li data-category="object">Car</li>  
</ul>

CSS

.target li {float:left;width:100px;height:100px;margin:10px;background:brown;list-style:none;text-align:center;line-height:100px;color:#fff}
#filter .active {font-weight:bold}

JavaScript

var activeFilter = $('#filter .active a').data('target');

$('#target li').filter(function() {
	var arr = $(this).data('category').split(" ");
  var isExist = $.inArray( activeFilter, arr );
  return isExist == -1  
}).hide();

$('#filter a').click(function() {
	var target = $(this).data("target");
  $(this).addClass('active').siblings().removeClass('active');
  $('#target li').hide();
  $('#target li').filter(function() {
    var arr = $(this).data('category').split(" ");
    var isExist = $.inArray( target, arr );
    return isExist != -1  
	}).show()
});