JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="ctrl">
	<ul>
		<li class="curr"><a href="#">all</a></li>
		<li><a href="#" rel="a">a</a></li>
		<li><a href="#" rel="b">b</a></li>
  </ul>
</div>

<div id="list">
	<div class="a">a</div>
	<div class="b">b</div>
  <div class="a">a</div>
	<div class="b">b</div>
</div>

CSS

.ctrl {margin-bottom: 10px;}
.ctrl, 
#list, 
#list > div {padding: 10px; border: 1px solid #000;}
.curr a {font-weight: bold;}
#list.a > div:not(.a),
#list.b > div:not(.b) {display: none;}

JavaScript

var ctrl = $('div.ctrl');
var new_ctrl = ctrl.clone(true);

filter_class();

ctrl.find('a').click(function(e) {
	filter_curr($(this));
	e.preventDefault();
});

function filter_class() {
	var curr_link = ctrl.find('.curr a').attr('rel');
	$('#list').removeClass().addClass(curr_link);
};

function filter_curr(elem) {
	ctrl.find('li').removeClass('curr').end().find('a').filter(elem).parent().addClass('curr');
	filter_class();
};

$('#list > div').hover(
	function() {
		$(this).append(new_ctrl);
	},
	function() {
		new_ctrl.remove();
	}
);