JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select-img-list">

<label><input name="myphoto" value="myphoto" type="radio">
<img src="https://dummyimage.com/500x500/000/fff"></label>

<label><input name="myphoto" value="myphoto" type="radio">
<img src="https://dummyimage.com/500x500/000/fff"></label>

<label><input name="myphoto" value="myphoto" type="radio">
<img src="https://dummyimage.com/500x500/000/fff"></label>

<label><input name="myphoto" value="myphoto" type="radio">
<img src="https://dummyimage.com/500x500/000/fff"></label>

<label><input name="myphoto" value="myphoto" type="radio">
<img src="https://dummyimage.com/500x500/000/fff"></label>

<label><input name="myphoto" value="myphoto" type="radio">
<img src="https://dummyimage.com/500x500/000/fff"></label>

<label><input name="myphoto" value="myphoto" type="radio">
<img src="https://dummyimage.com/500x500/000/fff"></label>

<label><input name="myphoto" value="myphoto" type="radio">
<img src="https://dummyimage.com/500x500/000/fff"></label>

<label><input name="myphoto" value="myphoto" type="radio">
<img src="https://dummyimage.com/500x500/000/fff"></label>

</div>

CSS

.select-img-list {
    display: flex;
    flex-wrap: wrap;
}
.select-img-list label {
    width: 150px;
    margin: 0 5px 5px 5px !important;
    display: table-cell;
    vertical-align: middle;
    text-align: center;    
}
.select-img-list input{
  display: none;
}
.select-img-list img {
    opacity: 0.5;
    transition: 0.3s;
    width: 50%;
    display: inline-block;
    margin-top: 25%;
}
.select-img-list input:checked + img {
    opacity: 1;
    width: 100%;
    margin-top: 0%;
}