JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gallery">

    <div class="thumbnail">
        <img src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/TMYHLN7I7J.jpg" />           
    </div>
    
    <div class="thumbnail">
        <img src="https://snap-photos.s3.amazonaws.com/img-thumbs/280h/Y0R3XXMNGZ.jpg" />
    </div>

    <div class="thumbnail">
        <img src="https://snap-photos.s3.amazonaws.com/img-thumbs/280h/ZN6L1ZT073.jpg" />
    </div>
            
    <div class="thumbnail">
        <img src="https://snap-photos.s3.amazonaws.com/img-thumbs/280h/SVKP65LN31.jpg" />
    </div>
            
    <div class="thumbnail">
        <img src="https://snap-photos.s3.amazonaws.com/img-thumbs/280h/16VYGB9PG5.jpg" />
    </div>

</div>
        
<div id="large_image"></div>

CSS

#gallery .thumbnail {
    overflow:hidden;
    width:40px;
    height:40px;
    border:2px solid #bbb;
    margin:0.5em;
    border-radius:2px;
    opacity:0.6;
    float:left;
    -webkit-transition: 0.1s 0.1s;
    -moz-transition: 0.1s 0.1s;
    -ms-transition: 0.1s 0.1s;
    -o-transition: 0.1s 0.1s;
    transition: 0.1s 0.1s;
}

#gallery .thumbnail:hover {
    cursor:pointer;
    opacity:1;
    border-color:#EF5B6A !important;
}

#gallery #selected_thumb {
    opacity:1;
    border-color:#4FA2CC;
}

#gallery .thumbnail img {
    height:100%;
}

#gallery {
    width:96%;
    padding:2%;
    border-bottom:2px solid #bbb;
    margin-bottom:1em;
}

#gallery:after {
    content:'';
    display:block;
    clear: both;
}

#large_image img {
    border:1px solid #eee;
    width:60%;
    overflow:hidden;
    margin:0 auto;
    box-shadow:0 0 5px #000;
}

JavaScript

// Find/Select the "large_image" div:
var big_img = document.getElementById("large_image");

// Find/Select all thumbnails - they will be stored as an array
var thumbnails = document.getElementsByClassName("thumbnail");

// Test to see we have selected them correctly:
console.log(big_img);
console.log(thumbnails);