JSFiddle - React, Tailwind, and code Playground

by Thomas Jackson

HTML

<div class="main_image">
   <img id="main" src="https://thumbs.dreamstime.com/z/usa-hiker-woman-bryce-canyon-hiking-relaxing-looking-view-hike-wearing-backpack-summer-travel-national-park-221264168.jpg" /> 
</div>

<ul>
    <li>
        <img src="https://thumbs.dreamstime.com/z/usa-hiker-woman-bryce-canyon-hiking-relaxing-looking-view-hike-wearing-backpack-summer-travel-national-park-221264168.jpghttp://placehold.it/200x300" alt="Image Name" />
    </li>
    <li>
        <img src="https://cdn11.bigcommerce.com/s-e2nupsxogj/images/stencil/1200x1200/products/5902/28360/apipg4qrj__98785.1623504003.jpg" alt="Image Name" />
    </li>
</ul>

CSS

li img { height: 30px; border: 1px dashed blue;}
.main_image { border: 1px solid black; height: 500px; width: 500px; }

JavaScript

$('li img').click( function() {
    $('#main').attr('src', $(this).attr('src'));
});