JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-mushroom.jpg" class="imagen">

<p>Colores disponibles:</p>
<img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img02-mushroom.jpg" onClick="cambiaImagen(0)" class="mini">
<img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img03-brown.jpg" onClick="cambiaImagen(1)" class="mini">
<img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img04-chocolate.jpg" onClick="cambiaImagen(2)" class="mini">

CSS

.imagen{
  width: 200px !important;
}
.mini{
  width:50px !important;
  cursor:pointer;
}

JavaScript

function cambiaImagen(X){

var img = [
						'http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-mushroom.jpg',
            'http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-brown.jpg',
            'http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-chocolate.jpg',
          
          ];

$(".imagen").attr('src',img[X]);

}