JSFiddle - React, Tailwind, and code Playground

HTML

<div id="article">
    <div id="category">
        <ul>
            <li>
                <label for="linkone">All</label>
            </li>
            <li>
                <label for="linktwo">Web</label>
            </li>
            <li>
                <label for="linkthree">Print</label>
            </li>
            <li>
                <label for="linkfour">Logo</label>
            </li>
            <li>
                <label for="linkfive">App</label>
            </li>
            <li>
                <label for="linksix">Branding</label>
            </li>
        </ul>
    </div>
    <div class="images">
        <input type="checkbox" class="all" id="linkone" />
        <input type="checkbox" class="web" id="linktwo" />
        <input type="checkbox" class="print" id="linkthree" />
        <input type="checkbox" class="logo" id="linkfour" />
        <input type="checkbox" class="app" id="linkfive" />
        <input type="checkbox" class="branding" id="linksix" /> <span class="app all"><img src="http://www.placehold.it/100" /></span>
 <span class="all app"><img src="http://www.placehold.it/100" /></span>
 <span class="all web"><img src="http://www.placehold.it/100" /></span>
 <span class="all web"><img src="http://www.placehold.it/100" /></span>
 <span class="all logo"><img src="http://www.placehold.it/100" /></span>
 <span class="all app"><img src="http://www.placehold.it/100" /></span>
 <span class="all app"><img src="http://www.placehold.it/100" /></span>
 <span class="all branding"><img src="http://www.placehold.it/100" /></span>
 <span class="all branding"><img src="http://www.placehold.it/100" /></span>
 <span class="all app"><img src="http://www.placehold.it/100" /></span>
 <span class="all print"><img src="http://www.placehold.it/100" /></span>
 <span class="all print"><img src="http://www.placehold.it/100" /></span>
<span class="all print"><img src="http://www.placehold.it/100" /></span>
        <span class="all logo"><img...

CSS

ul {
    display: block;
}
ul li {
    list-style: none;
    display: inline-block;
}
label {
    background-color: #333;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    margin: 0 5px 5px;
    padding: 5px;
}
label:hover {
    background-color: #000;
    cursor: pointer;
}
[type='checkbox'] {
    display:none;
}
img {
    opacity: 0.5;
}

input.all:checked ~ span.all img {
    opacity: 1;
}

input.app:checked ~ span.app img {
    opacity: 1;
}

input.web:checked ~ span.web img {
    opacity: 1;
}

input.print:checked ~ span.print img {
    opacity: 1;
}
input.logo:checked ~ span.logo img {
    opacity: 1;
}
input.branding:checked ~ span.branding img {
    opacity: 1;
}