JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
<div class="leftSide">        
  <div class="imageZoom">
    <a class="oben" title="" href="#">          
        <img src="http://placehold.it/500x500/lime" alt="" />        
    </a>
    
    <a class="seite" title="" href="#">              
        <img src="http://placehold.it/500x500/lime" alt="" />            
    </a>
    
    <a class="fuss" title="" href="#">               
        <img src="http://placehold.it/500x500/lime" alt="" />            
    </a> 
  </div>                         
  
  <div class="smallImages">          
    <div class="smallUnderImage oben">            
      <a title="" href="#">              
          <img src="http://i.ebayimg.com/t/Norwegersocken-grau-meliert-100-Schafwolle-1-Paar-/00/s/NjAwWDYwMA==/z/1vsAAOxyRhBS5ZLz/$_14.JPG" style="max-width:64px;max-height:64px" index="0" alt="" />            
      </a>             
    </div>          
    <div class="smallUnderImage seite">            
      <a title="" href="#">              
          <img src="http://i.ebayimg.com/t/Norwegersocken-grau-meliert-100-Schafwolle-1-Paar-/00/s/NjAwWDYwMA==/z/v2kAAOxycmBS5ZLy/$_14.JPG" style="max-width:64px;max-height:64px" index="1" alt="" />            
      </a>          
    </div>
    <div class="smallUnderImage fuss">            
      <a title="" href="#">               
          <img src="http://i.ebayimg.com/t/Norwegersocken-grau-meliert-100-Schafwolle-1-Paar-/00/s/NjAwWDYwMA==/z/Jv4AAMXQVT9S5ZLu/$_14.JPG" style="max-width:64px;max-height:64px" index="2" alt="" />            
      </a>          
    </div>        
  </div>         
</div>
</div>

CSS

.leftSide a.oben {display:block;}
.leftSide a.seite {display:none;}
.leftSide a.fuss {display:none;}

    .content .leftSide {float:left;width:49%;}
      .content .leftSide a {}
        .content .leftSide > a > img {float:left;width:100%;}
      .content .leftSide .smallImages {}
        .content .leftSide .smallImages .smallUnderImage {float:left;border:1px solid #D3D3D3;margin-right:9px;padding:12px;}
        .content .leftSide .smallImages .smallUnderImage:hover {border-color:#FF5B00;}
        .content .leftSide .smallImages .smallUnderImage:last-child {margin-right:0;}

JavaScript

$('.smallImages .smallUnderImage a').on('click', function() {

	var img = $(this).html();
	var imgClass = $(this).parent().attr('class');
	var oldImg = $('.imageZoom a').html();

	$('.imageZoom a').html(img);
	$(this).html(oldImg).parent().addClass(imgClass);
});