JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 700px; height: 850px;  position: absolute; left: -20px;">

  <div class="imagens" style="position: static; left: 90px; width: 130px; height: 129px; ">

    <div style="position:  absolute; left: 55px; ">
      <div style="position: absolute; left: 29px;  top: 38px;"><img src="http://i.imgur.com/Ww2xT7t.png" /></div>

      <div style="position: absolute; left: 7px;  top: 2px">
        <input type="checkbox" name="imagem" id="i1" checked="checked" />
        <label for="i1"><img src="http://i.imgur.com/OpIgi4H.png" /></label>
      </div>

      <div style="position: absolute; left: 50px;  top: -15px;">
        <input type="checkbox" name="imagem" id="i2" />
        <label for="i2"><img src="http://i.imgur.com/8Iyy2C4.png" /></label>
      </div>

      <div style="position: absolute; left: 94px; top: 5px">
        <input type="checkbox" name="imagem" id="i3" />
        <label for="i3"><img src="http://i.imgur.com/M6hK389.png" /></label>
      </div>

      <div style="position: absolute; left: 97px; top: 55px">
        <input type="checkbox" name="imagem" id="i4" />
        <label for="i4"><img src="http://i.imgur.com/M5UHtdt.png" /></label>
      </div>

      <div style="position: absolute; left: 49px;  top: 90px;">
        <input type="checkbox" name="imagem" id="i5" />
        <label for="i5"><img src="http://i.imgur.com/XWX98Fc.png" /></label>
      </div>

      <div style="position: absolute; left: 3px;  top: 55px">
        <input type="checkbox" name="imagem" id="i6" />
        <label for="i6"><img src="http://i.imgur.com/cdasBJA.png" /></label>
      </div>

    </div>
  </div>
</div>

CSS

.imagens input[type="checkbox"] {
  visibility: hidden;
}

.imagens label {
  display: block;
  border: 1px solid #666;
  width: 50px;
}

.imagens input[type="checkbox"]:checked+label {
  border-color: #ccf;
}

.imagens img {}

JavaScript

$('#i1').click(i1);
   function i1() {
     if ($('#i1').is(":checked")) {
       $('#i1').closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
     } else {
       $('#i1').closest('div').children('label').children('img').attr("src", "http://i.imgur.com/OpIgi4H.png");
     }
   }
   $('#i2').click(i2);
   function i2() {
     if ($('#i2').is(":checked")) {
       $('#i2').closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
     } else {
       $('#i2').closest('div').children('label').children('img').attr("src", "http://i.imgur.com/8Iyy2C4.png");
     }
   }
   $('#i3').click(i3);
   function i3() {
     if ($('#i3').is(":checked")) {
       $('#i3').closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
     } else {
       $('#i3').closest('div').children('label').children('img').attr("src", "http://i.imgur.com/M6hK389.png");
     }
   }
   $('#i4').click(i4);
   function i4() {
     if ($('#i4').is(":checked")) {
       $('#i4').closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
     } else {
       $('#i4').closest('div').children('label').children('img').attr("src", "http://i.imgur.com/M5UHtdt.png");
     }
   }
   $('#i5').click(i5);
   function i5() {
     if ($('#i5').is(":checked")) {
       $('#i5').closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
     } else {
       $('#i5').closest('div').children('label').children('img').attr("src", "http://i.imgur.com/XWX98Fc.png");
     }
   }
   $('#i6').click(i6);
   function i6() {
     if ($('#i6').is(":checked")) {
      ...