JSFiddle - React, Tailwind, and code Playground

HTML

<div id='panelHolder'>
  <div id='panel1' class='panels'></div>
  <div id='panel2' class='panels'></div>
  <div id='panel3' class='panels'></div>
  <div id='panel4' class='panels'></div>
</div>

CSS

.panels {
  position:relative;
  border:2px solid silver;
  transition:transform 1.5s;
}

.panels:hover {
  transform:skewY(3deg);
}

#panel1.clicked{
  width:460;
  height:290;
}

#panel1{
  width:300px;
  height:125px;
  background-image:url('https://cdn2.scratch.mit.edu/get_image/user/15016755_60x60.png?v=1465352804.66');
  background-size:150px;
}

#panel2 {
  width:150px;
  height:300px;
  left:310px;
  bottom:129px;
  background-image:url('http://goo.gl/JY0LZh');
  background-repeat:no-repeat;
  background-position:center;
  background-color:#16C946;
}

#panel3 {
  background-image:url('http://goo.gl/K51osb');
  background-size:120px;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#EB2D30
}

#panel3, #panel4 {
  width:145px;
  height:165px;
  bottom:298px;
}

#panel4 {
  left:155px;
  bottom:467px;
  background-image:url('http://goo.gl/b5Pk3e');
  background-size:190px;
  background-position:center;
}

JavaScript

$('#panel1').on('click', function() {
    $(this).toggleClass('clicked');
});

$(document).ready(main)