JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="auto" id="a0"/>
<label for="a0">
    <img src="http://placehold.it/150x150/fff"/>
</label>
<input type="checkbox" name="auto" id="a1"/>
<label for="a1">
    <img src="http://placehold.it/150x150/fff"/>
</label>
<input type="checkbox" name="auto" id="a2"/>
<label for="a2">
    <img src="http://placehold.it/150x150/fff"/>
</label>
<input type="checkbox" name="auto" id="a3"/>
<label for="a3">
    <img src="http://placehold.it/150x150/fff"/>
</label>
<input type="checkbox" name="auto" id="a4"/>
<label for="a4">
    <img src="http://placehold.it/150x150/fff"/>
</label>
<input type="checkbox" name="auto" id="a5"/>
<label for="a5">
    <img src="http://placehold.it/150x150/fff"/>
</label>
<input type="checkbox" name="auto" id="a6"/>
<label for="a6">
    <img src="http://placehold.it/150x150/fff"/>
</label>
<input type="checkbox" name="auto" id="a7"/>
<label for="a7">
    <img src="http://placehold.it/150x150/fff"/>
</label>
<input type="checkbox" name="auto" id="a8"/>
<label for="a8">
    <img src="http://placehold.it/150x150/fff"/>
</label>
<input type="checkbox" name="auto" id="a9"/>
<label for="a9">
    <img src="http://placehold.it/150x150/fff"/>
</label>

CSS

input[type=checkbox] {
    display: none;
}
label img {
    border: 5px solid transparent;
}
label img:hover {
    border: 5px solid #35C878;
}
input:checked + label img {
    border: 5px solid #35C878;
}
input:checked + label::after
{
    content: "";
    position: absolute;
    background: url(http://joxi.ru/J2bJov1IMe7W26.jpg);
    width: 40px;
    height: 40px;
    margin-left: -40px;
}