JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div id="modal">
    <div id="colors">
        <ul class="product-image-thumbs">
            <li>
                <a href="#">
                    <img src="http://i.stack.imgur.com/um1Bo.jpg?s=128&g=1" id="thumb-0" class="gallery-image">
                </a>
             </li>
             <li>
                 <a href="#">
                     <img src="thumb-1.jpg" id="thumb-1" class="gallery-image">
                 </a>
             </li>
              <li>
                  <a href="#">
                      <img src="thumb-2.jpg" id="thumb-2" class="gallery-image">
                  </a>
             </li>
         </ul>
    </div>

    <div class="photo">
        <img src="current_img" id="1">
    </div>
</div>

JavaScript

jQuery(document).ready(function(){
  jQuery(".gallery-image").click(function(){
    $(".photo > img").prop("src", jQuery(this).prop("src"));
    return false;
  });
});