JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filter">
    <h3 style="text-align: center;">Blog Profession Filters</h3>
    <ul class="checkbox">
        <li>
            <input type="checkbox" id="cb1" rel="accounting" value="accounting" />
            <label for="cb1">Accounting</label>
        </li>
        <li>
            <input type="checkbox" id="cb2" rel="project-management" value="project-management" />
            <label for="cb2">Project Management</label>
        </li>
        <li>
            <input type="checkbox" id="cb3" rel="information technology" value="information-technology" />
            <label for="cb3">Information Technology</label>
        </li>
        <li>
            <input type="checkbox" id="cb4" rel="courier" value="courier" />
            <label for="cb4">Courier</label>
        </li>
        <li>
            <input type="checkbox" id="cb5" rel="video-games" value="video-games" />
            <label for="cb5">Video Games</label>
        </li>
        <li>
            <input type="checkbox" id="cb6" rel="web-development" value="web-development" />
            <label for="cb6>">Web Development</label>
        </li>
        <li>
            <input type="checkbox" id="cb7" rel="veterinarian" value="veterinarian" />
            <label for="cb6>">Veterinarian</label>
        </li>
        <li>
            <input type="checkbox" id="cb8" rel="web-designer" value="web-designer" />
            <label for="cb6>">Web Designer</label>
        </li>
        <li>
            <input type="checkbox" id="cb9" rel="attorney" value="attorney" />
            <label for="cb9>">Attorney</label>
        </li>
        <li>
            <input type="checkbox" id="cb10" rel="medical-practitioner" value="medical-practitioner" />
            <label for="cb10>">Medical Practitioner</label>
        </li>
        <li>
            <input type="checkbox" id="cb11" rel="telemarketing" value="telemarketing" />
            <label for="cb11>">Telemarketing</label>
        </li>
        <li>
          ...

CSS

.filter {
    width: 850px;
    padding: 25px;
    border: 1px solid black;
    margin: 25px;
}
ul.checkbox {
    margin: 0;
    padding: 0;
    margin-left: 20px;
    list-style: none;
}
ul.checkbox li input {
    margin-right: .25em;
}
ul.checkbox li {
    border: 1px transparent solid;
    display:inline-block;
    width:12em;
}
ul.checkbox li label {
    margin-left:;
}
ul.checkbox li:hover, ul.checkbox li.focus {
    background-color: lightyellow;
    border: 1px gray solid;
    width: 12em;
}
.results {
    width: 850px;
    padding: 25px;
    border: 1px solid black;
    margin: 25px;
}

JavaScript

$('ul.checkbox').find('input:checkbox').on('click', function () {
    var vals = $('input:checkbox:checked').map(function () {
        return $(this).attr('rel');
    }).get();
    $('.results li').hide().filter(function () {
        return ($.inArray($(this).attr('class'), vals) > -1)
    }).show()
    if ($('input:checkbox:checked').length == 0) $('.results li').show()
});