JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<section id="preguntas">
<div id="base">
<article class="preg1">
        </article>
    <article class="prega"> 
  </article>
    <article class="pregb"> 
    </article>
  <article class="pregc">
        </article>
 <article class="pregd">
        </article>  
  <article class="prege">
    </article>
 <article class="pregf">
</div>
    <div id="respuestas">
     <span id="img1">  <img src="http://upload.wikimedia.org/wikipedia/commons/0/07/Bonsai_IMG_6425.jpg" class="respuesta" alt="img1"/></span> 
     <span id="img2"> <img src="http://upload.wikimedia.org/wikipedia/commons/0/07/Bonsai_IMG_6425.jpg" class="respuesta" alt="img2"/></span>
     <span id="img3"> <img src="http://upload.wikimedia.org/wikipedia/commons/0/07/Bonsai_IMG_6425.jpg" class="respuesta" alt="img3"/></span>
     <span id="img4">   <img src="http://upload.wikimedia.org/wikipedia/commons/0/07/Bonsai_IMG_6425.jpg" class="respuesta" alt="img4"/>  </span>
    <span id="img5">    <img src="http://upload.wikimedia.org/wikipedia/commons/0/07/Bonsai_IMG_6425.jpg" class="respuesta" alt="img5"/></span>
    <span id="img6">    <img src="http://upload.wikimedia.org/wikipedia/commons/0/07/Bonsai_IMG_6425.jpg" class="respuesta" alt="img6"/></span>
    </div>
</section>

CSS

article{
  width:20px;
  height:20px;
  background:blue;
  display:inline-block;
  margin:5px;
}
article.selected{
  background:red;
}
span{
  float:left;
  width:20px;
  height:20px;


  margin:5px;
}
img{
  width:20px;
  height:20px; 
  position:absolute;
  -webkit-transition: all 3.5s ease-in-out;
  -moz-transition: all 3.5s ease-in-out;
  -ms-transition: all 3.5s ease-in-out;
  -o-transition: all 3.5s ease-in-out;
  transition: all 3.5s ease-in-out;   
}

JavaScript

var x;
var y;

$('article').each(function(index){
  $(this).click(function(){
    $(this).addClass('selected') ;
    x = $(this).offset().left;
    y = $(this).offset().top;
  })
});

$('img').each(function(index){
  var xi = $(this).offset().left;
  var yi = $(this).offset().top;
  $(this).css('left', xi).css('top', yi);
  $(this).click(function(){
    $(this).animate({
      left: x,
      top: y
    })
  })
});