JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="filter">
    <li style="list-style-type: none" class="all"><a href="#">all</a>

    </li>
    <li style="list-style-type: none" class="people"><a href="#people">people</a>

    </li>
    <li style="list-style-type: none" class="things"><a href="#things">things</a>

    </li>
</ul>
<ul id="portfolio">
    <li class="things">thing 1</li>
    <li class="things">thing 2</li>
    <li class="things">thing 3</li>
    <li class="things">thing 4</li>
    <li class="people">person 1</li>
    <li class="people">person 2</li>
    <li class="people">person 3</li>
    <li class="people">person 4</li>
</ul>

CSS

ul#filter {
    padding-right: 10px;
    padding-left: 0;
    float: left;
    font-size: 14px;
    list-style: none;
    margin-left: 0;
    width: 100%;
}
ul#filter li {
    border-right: 0px solid #dedede;
    border-left: 0px solid #dedede;
    float: left;
    line-height: 8px;
    padding-right: 10px;
}
ul#filter li:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}
ul#filter a {
    color: #999;
    text-decoration: none;
}
ul#filter li.current a, ul#filter a:hover {
    text-decoration: underline;
}
ul#filter li.current a {
    color: #999;
    font-weight: bold;
}
ul#portfolio {
    max-width: 100%;
    list-style: none;
    margin-left: 0;
    padding: 0px;
}
ul#portfolio li {
    border: 0px solid #dedede;
    float: left;
    padding-right: 5px;
    padding-top: 5px;
    width: auto;
}
ul#portfolio a {
    display: block;
    width: 100%;
}
ul#portfolio a:hover {
    text-decoration: none;
}
ul#portfolio img {
    border: 2px none #dedede;
    display: block;
}
}

JavaScript

$('ul#filter a').click(function () {
    $(this).css('outline', 'none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ', '-');

    if (filterVal == 'all') {
        $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
    } else {

        $('ul#portfolio li').each(function () {
            if (!$(this).hasClass(filterVal)) {
                $(this).fadeOut('normal').addClass('hidden');
            } else {
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
    }

    return false;
});