JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
    <a href="javascript:void(0);" class="abstract">abstract</a>
    <a href="javascript:void(0);" class="city">city</a>
    <a href="javascript:void(0);" class="people">people</a>
    <a href="javascript:void(0);" class="transport">transport</a>
    <a href="javascript:void(0);" class="animals">animals</a>
    <a href="javascript:void(0);" class="food">food</a>
    <a href="javascript:void(0);" class="nature">nature</a>
    <a href="javascript:void(0);" class="business">business</a>
    <a href="javascript:void(0);" class="nightlife">nightlife</a>
    <a href="javascript:void(0);" class="sports">sports</a>
    <a href="javascript:void(0);" class="cats">cats</a>
    <a href="javascript:void(0);" class="fashion">fashion</a>
    <a href="javascript:void(0);" class="technics">technics</a>
    <img src="http://lorempixel.com/100/100/abstract" class="abstract" alt="" />
    <img src="http://lorempixel.com/100/100/city" class="city" alt="" />
    <img src="http://lorempixel.com/100/100/people" class="people" alt="" />
    <img src="http://lorempixel.com/100/100/fashion" class="fashion" alt="" />
    <img src="http://lorempixel.com/100/100/animals" class="animals" alt="" />
    <img src="http://lorempixel.com/100/100/abstract" class="abstract" alt="" />
    <img src="http://lorempixel.com/100/100/animals" class="animals" alt="" />
    <img src="http://lorempixel.com/100/100/transport" class="transport" alt="" />
    <img src="http://lorempixel.com/100/100/technics" class="technics" alt="" />
    <img src="http://lorempixel.com/100/100/food" class="food" alt="" />
    <img src="http://lorempixel.com/100/100/transport" class="transport" alt="" />
    <img src="http://lorempixel.com/100/100/cats" class="cats" alt="" />
    <img src="http://lorempixel.com/100/100/city" class="city" alt="" />
    <img src="http://lorempixel.com/100/100/people" class="people" alt="" />
    <img src="http://lorempixel.com/100/100/fashion" class="fashion" alt="" />
    <img...

CSS

.gallery img {
    border: 1px solid #333;
    float: left;
    margin: 5px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
a + img {
    clear: left;
}
a:link,
a:visited {
    background-color: #333;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    float: left;
    margin: 0 5px 5px;
    padding: 5px;
    text-decoration: none;
}
a:hover,
a:active {
    background-color: #000;
}
a.abstract:active ~ img.abstract,
a.abstract:focus ~ img.abstract {
    opacity: 1;
}
a.city:active ~ img.city,
a.city:focus ~ img.city {
    opacity: 1;
}
a.people:active ~ img.people,
a.people:focus ~ img.people {
    opacity: 1;
}
a.transport:active ~ img.transport,
a.transport:focus ~ img.transport {
    opacity: 1;
}
a.animals:active ~ img.animals,
a.animals:focus ~ img.animals {
    opacity: 1;
}
a.food:active ~ img.food,
a.food:focus ~ img.food {
    opacity: 1;
}
a.nature:active ~ img.nature,
a.nature:focus ~ img.nature {
    opacity: 1;
}
a.business:active ~ img.business,
a.business:focus ~ img.business {
    opacity: 1;
}
a.nightlife:active ~ img.nightlife,
a.nightlife:focus ~ img.nightlife {
    opacity: 1;
}
a.sports:active ~ img.sports,
a.sports:focus ~ img.sports {
    opacity: 1;
}
a.cats:active ~ img.cats,
a.cats:focus ~ img.cats {
    opacity: 1;
}
a.fashion:active ~ img.fashion,
a.fashion:focus ~ img.fashion {
    opacity: 1;
}
a.technics:active ~ img.technics,
a.technics:focus ~ img.technics {
    opacity: 1;
}