JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="main-image-row">
      <div class="main-image-div"><img src="https://upload.wikimedia.org/wikipedia/en/7/75/TSET_APGE.GIF" class="main-image-img"/></div>
    </div>
    <div class="mini-image-container">
      <div style="background-image: url('http://blueseptember.org.au/wp-content/uploads/2015/07/Blue-square.jpg');" class="mini-image-div">
        <div class="mini-image-cover"></div>
      </div>
      <div style="background-image: url('http://blueseptember.org.au/wp-content/uploads/2015/07/Blue-square.jpg');" class="mini-image-div">
        <div class="mini-image-cover"></div>
      </div>
      <div style="background-image: url('http://blueseptember.org.au/wp-content/uploads/2015/07/Blue-square.jpg');" class="mini-image-div">
        <div class="mini-image-cover"></div>
      </div>
      <div style="background-image: url('http://blueseptember.org.au/wp-content/uploads/2015/07/Blue-square.jpg');" class="mini-image-div">
        <div class="mini-image-cover"></div>
      </div>
      <div style="background-image: url('http://blueseptember.org.au/wp-content/uploads/2015/07/Blue-square.jpg');" class="mini-image-div">
        <div class="mini-image-cover"></div>
      </div>
      <div style="background-image: url('http://blueseptember.org.au/wp-content/uploads/2015/07/Blue-square.jpg');" class="mini-image-div">
        <div class="mini-image-cover"></div>
      </div>
      <div style="background-image: url('http://blueseptember.org.au/wp-content/uploads/2015/07/Blue-square.jpg');" class="mini-image-div">
        <div class="mini-image-cover"></div>
      </div>
      <div style="background-image: url('http://blueseptember.org.au/wp-content/uploads/2015/07/Blue-square.jpg');" class="mini-image-div">
        <div class="mini-image-cover"></div>
      </div>
      <div style="background-image: url('http://blueseptember.org.au/wp-content/uploads/2015/07/Blue-square.jpg');" class="mini-image-div">
        <div class="mini-image-cover"></div>
 ...

CSS

.main-image-row{
  background-color: #3D3732;
  width: 100%;
  float: left!important;
  text-align: center;
}

.main-image-img{
  margin: auto;
  width: auto;
  max-height: 575px!important;
}

.mini-image-row{
  margin: auto;
  float: left!important;
  text-align: center;
  clear:left;
}

.mini-image-container{
  float: left!important;
  margin: auto;
  background-color: #3D3732;
}



.mini-image-div{
  height: 100px;
  width: 100px;
  border: 1px solid black;
  background-size: auto 200px;
  background-position: center;
  float: left;
}

.mini-image-cover{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
}

.mini-image-cover:hover{
  background-color: rgba(0,0,0,0);
}

JavaScript

(function($){
  $(document).ready(function($){


    var imageController = {};

    imageController.imageObjects = getImageObjects();
    imageController.selectedImageObject = 0;
    imageController.mainImageImg = $('.main-image-img');
    updateSelectedImage(imageController.selectedImageObject);

    updateMainImage();

    function getImageObjects(){
      imageObjects = [];
      var allImageDivs = getMiniImageDivArray();

      for (var i = 0; i < allImageDivs.length; i++){
        var thisImageDiv = allImageDivs[i];
        var thisImageObject = getImageObjectFromDiv(thisImageDiv);
        thisImageObject.indexValue = i;

        imageObjects[thisImageObject.image] = thisImageObject;
        imageObjects.push(thisImageObject);
      }
      return imageObjects;
    }

    function getImageObjectFromDiv(inputDiv){
      var thisImageObject = {};

      thisImageObject.imageDiv = inputDiv;
      thisImageObject.image = trimCssUrlSyntax($(inputDiv).css("background-image"));
      thisImageObject.isSelected = false;

      return thisImageObject;
    }

    function updateMainImage(){
      var selected = imageController.selectedImageObject;
      var currentImageObject = imageController.imageObjects[selected];
      var newImage = currentImageObject.image;

      $(imageController.mainImageImg).attr("src", newImage);
    }

    function trimCssUrlSyntax(inputString){
      var returnString = inputString.replace(")", "");
      returnString =  returnString.replace("url(", "");
      return returnString;
    }

    function getMiniImageDivArray(){
      return $('.mini-image-div').toArray();
    }

    function updateSelectedImage(selectedImage){
      unselectAllImageObjects();
      imageController.imageObjects[selectedImage].isSelected = true;
    }

    function unselectAllImageObjects(){
      for (var i = 0; i < imageController.imageObjects.length; i++){
        var thisImageObject = imageController.imageObjects[i];
        thisImageObject.selected =...