JSFiddle - React, Tailwind, and code Playground
HTML
<div class="labels">
<span id="all" class="label active">All</span>
<span id="staff" class="label">Research Staff</span>
<span id="students" class="label">Research Students</span>
<span id="associates" class="label">Associates</span>
<span id="past" class="label">Past Members</span>
</div>
<div id="container">
<div class="staff"></div>
<div class="associates"></div>
<div class="students"></div>
<div class="staff"></div>
<div class="students"></div>
<div class="associates"></div>
<div class="staff"></div>
<div class="students"></div>
<div class="past"></div>
<div class="past"></div>
</div>
CSS
.label.active {
background-color: #4EB478;
font-size: 14px;
color: #fff;
}
.label {
cursor: pointer;
display: inline-block;
padding: .25em .6em;
font-weight: 500;
line-height: 1;
color: #4EB478;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
margin-bottom: 10px;
}
.container {
display: block;
}
.staff {
display: inline-block;
width: 100px;
height: 100px;
background: #321;
}
.students {
display: inline-block;
width: 100px;
height: 100px;
background: #789;
}
.associates {
display: inline-block;
width: 100px;
height: 100px;
background: #189;
}
.past {
display: inline-block;
width: 100px;
height: 100px;
background: #222;
}
JavaScript
$("#all").click(function(){
$(this).addClass('active');
$(this).siblings().removeClass("active");
$("#container div").show();
})
$("#associates").click(function(){
$(this).siblings().removeClass("active");
$(this).addClass('active');
$("#container div").hide();
$('.associates').show();
})
$("#staff").click(function(){
$(this).siblings().removeClass("active");
$(this).addClass('active');
$("#container div").hide();
$('.staff').show();
})
$("#students").click(function(){
$(this).siblings().removeClass("active");
$(this).addClass('active');
$("#container div").hide();
$('.students').show();
})
$("#past").click(function(){
$(this).siblings().removeClass("active");
$(this).addClass('active');
$("#container div").hide();
$('.past').show();
})