JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<button id="everyone">Everyone</button> | <button id="mentors">Mentors</button> | <button id="founders">Founders</button>

<hr>

<div id="people"><img src="http://placehold.it/90x90&text=founder" class="founder"><img src="http://placehold.it/90x90&text=mentor" class="mentor"><img src="http://placehold.it/90x90&text=founder" class="founder"><img src="http://placehold.it/90x90&text=mentor" class="mentor"><img src="http://placehold.it/90x90&text=founder" class="founder"><img src="http://placehold.it/90x90&text=mentor" class="mentor"><img src="http://placehold.it/90x90&text=founder" class="founder"><img src="http://placehold.it/90x90&text=mentor" class="mentor"><img src="http://placehold.it/90x90&text=founder" class="founder"><img src="http://placehold.it/90x90&text=mentor" class="mentor"><img src="http://placehold.it/90x90&text=mentor" class="mentor"><img src="http://placehold.it/90x90&text=founder" class="founder"><img src="http://placehold.it/90x90&text=mentor" class="mentor"><img src="http://placehold.it/90x90&text=mentor" class="mentor"><img src="http://placehold.it/90x90&text=mentor" class="mentor"><img src="http://placehold.it/90x90&text=founder" class="founder"></div>

CSS

button {
    background: white;
}

.active {
    color: white;
    background: blue;
}

img {
    margin: 10px;
}

JavaScript

$('#everyone').click(function() {
    $('#people img').show();
});

$('#mentors').click(function() {
    $('#people img').show().not('.mentor').hide();
});

$('#founders').click(function() {
    $('#people img').show().not('.founder').hide();
});

$('button').click(function() {
    $('button.active').removeClass('active');
    $(this).addClass('active');
});

$('#everyone').click();