JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="linkOne" />
<div class="category">
    <label for="linkOne">Category One (click me)</label>
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
</div>

CSS

input[type=checkbox] {
    display: none;
}
input[type=checkbox]:checked + .category img {
    transition: opacity 0.5s ease;
    opacity:0.5;
}
input[type=checkbox] + .category img {
    transition: opacity 0.5s ease;
    opacity:1;
}
label:hover { 
    text-decoration: underline;
    cursor: pointer;
    color: blue;
}
label {
    display: block;
}
input[type=checkbox]:checked + .category label {
    font-weight: bold;
    color: #F00;
}