JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="largethumb">
  <img src="https://i.stack.imgur.com/hvA7r.jpg?s=48&g=1"/>
  <a class="left" href="#"> <i class="icon-chevron-left"></i></a>
  <a class="right" href="#"> <i class="icon-chevron-right"></i></a>
</div> <!-- End largeImage -->

<div class="thumbgallery clearfix">
  <div class="thumb active"><a href="https://i.stack.imgur.com/hvA7r.jpg?s=48&g=1"><img src="https://i.stack.imgur.com/hvA7r.jpg?s=48&g=1"/></a></div>
  <div class="thumb"><a href="https://i.stack.imgur.com/pYT3a.png?s=48&g=1"><img src="https://i.stack.imgur.com/pYT3a.png?s=48&g=1"/></a></div>
  <div class="thumb"><a href="https://i.stack.imgur.com/2DTBv.jpg?s=48&g=1"><img src="https://i.stack.imgur.com/2DTBv.jpg?s=48&g=1"/></a></div>
  <div class="thumb"><a href="https://i.stack.imgur.com/hvA7r.jpg?s=48&g=1"><img src="https://i.stack.imgur.com/hvA7r.jpg?s=48&g=1"/></a></div>
   <div class="thumb"><a href="https://i.stack.imgur.com/liWhg.png?s=48&g=1"><img src="https://i.stack.imgur.com/liWhg.png?s=48&g=1"/></a></div>
  <div class="thumb"><a href="https://i.stack.imgur.com/hvA7r.jpg?s=48&g=1"><img src="https://i.stack.imgur.com/hvA7r.jpg?s=48&g=1"/></a></div>
  <div class="thumb"><a href="https://i.stack.imgur.com/F8o2h.jpg?s=48&g=1"><img src="https://i.stack.imgur.com/F8o2h.jpg?s=48&g=1"/></a></div>
  <div class="thumb"><a href="https://www.gravatar.com/avatar/7deca8ec973c3c0875e9a36e1e3e2c44?s=48&d=identicon&r=PG"><img src="https://www.gravatar.com/avatar/7deca8ec973c3c0875e9a36e1e3e2c44?s=48&d=identicon&r=PG"/></a></div>
</div>

CSS

.active img{
    border: 1px solid red;
    background: gray;
    padding:5px;
}
.largethumb {
  border:2px solid green;
  margin-bottom:20px;
  text-align:center;
  width:100%;
}
.thumbgallery .thumb{
  width:100px;
  float:left;
}

JavaScript

$(document).ready(function(){
         $(".thumbgallery .thumb a").click(function(e) {
        $(this).parent().addClass("active");
        $(this).parent().removeClass("active");

        var href = $(this).attr("href");
        $(".largethumb img").attr("src",href);
        e.preventDefault();
        return false;
      });
    });