JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images">
  <img src="http://placehold.it/350x150?text=1" class="active"/>
  <img src="http://placehold.it/350x150?text=2" />
  <img src="http://placehold.it/350x150?text=3" />
  <img src="http://placehold.it/350x150?text=4" />
</div>
<div class="thumbs">
  <a href="http://placehold.it/350x150?text=1" class="show-image"><img src="http://placehold.it/30x30?text=1"></a>
  <a href="http://placehold.it/350x150?text=2" class="show-image"><img src="http://placehold.it/30x30?text=2"></a>
  <a href="http://placehold.it/350x150?text=3" class="show-image"><img src="http://placehold.it/30x30?text=3"></a>
  <a href="http://placehold.it/350x150?text=4" class="show-image"><img src="http://placehold.it/30x30?text=4"></a>
</div>

CSS

.images img {display: none}
.images .active {display: block}

JavaScript

$(".show-image").click(function() {
    event.preventDefault();
    var mainImage = $(this).index(); 
    $('.images img').removeClass('active');
    $('.images img').eq(mainImage).addClass('active'); 
});