JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="contenedor">
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    </div>

CSS

.contenedor{
	  	width: 600px;
	  	margin: 0 auto;
	  	display: block;
	  	position: relative;
	  }
	  .contenedor div{
	  	display: inline-block;
	  	vertical-align: top;
	  	width: 150px;
	  	height:150px;
	  	background-color: blue;
	  	margin-bottom: 5px;
	  	position: relative;
	  	transition:5s;
	  	-webkit-transition:1s;
	  	-moz-transition:1s;
	  	-ms-transition:1s;
	  	-o-transition:1s;
	  }
	  .contenedor .activo{
	  	position: absolute;
        background: red;
        z-index: 10;
        opacity: 1 !important;
        display: block !important;
	  }
	  .contenedor .mover{
		top: 0 !important;
        left: 0 !important;
	  }
	  .ocultar{
	  	opacity: 0;
	  }

JavaScript

$(function(){
	  	$('.contenedor > div').click(function(){	  		
	  		var el = $(this);
	  		var top = el.position().top,
	  		    left = el.position().left;
	  		console.log(top , left)
	  		el.addClass('activo');
	  		el.css({'top':top+'px','left':left+'px'});
	  		setTimeout(function(){
	  			el.addClass('mover')
	  			$('.contenedor > div').addClass('ocultar');
	  		},1000)	  		
	  	})
	  })