JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>
<table id="container" >
    <tr>
    <td>
        <div class="thumbnail-1"><br /><br />
            [1] Zoom
        </div>
   </td>
    <td>
        <div class="thumbnail-2"><br /><br />
            [2] Rotate-R
        </div>
   </td>
    <td>
        <div class="thumbnail-3"><br /><br />
            [3] Rotate-L
        </div>
   </td>
</tr>
<tr>
    <td>
        <div class="thumbnail-4"><br /><br />
            [4] Move-Up
        </div>
   </td>
    <td>
        <div class="thumbnail-5"><br /><br />
            [5] Pivot-R
        </div>
   </td>
    <td>
        <div class="thumbnail-6"><br /><br />
            [6] Pivot-L
        </div>
   </td>
</tr>
<tr>
    <td>
        <div class="thumbnail-7"><br /><br />
            [7] Zoom-Up-R
        </div>
   </td>
    <td>
        <div class="thumbnail-8"><br /><br />
            [8] Zoom-Up-C
        </div>
   </td>
    <td>
        <div class="thumbnail-9"><br /><br />
            [9] Zoom-Up-L
        </div>
   </td>
</tr>

</table>


<!-- This bottom table is all ZOOM -->
<table id="container-2" >
<tr>
    <td>
        <div class="justZoom"><br /><br />
            Zoom 1
        </div>
   </td>
    <td>
        <div class="justZoom"><br /><br />
            Zoom 2
        </div>
   </td>
    <td>
        <div class="justZoom"><br /><br />
            Zoom 3
        </div>
   </td>
</tr>
<tr>
    <td>
        <div class="justZoom"><br /><br />
            Zoom 4
        </div>
   </td>
    <td>
        <div class="megaZoom"><br /><br />
            <br />MEGA ZOOM
        </div>
   </td>
    <td>
        <div class="justZoom"><br /><br />
            Zoom 6
        </div>
   </td>
</tr>
<tr>
    <td>
        <div class="justZoom"><br /><br />
            Zoom 7
        </div>
   </td>
    <td>
        <div class="justZoom"><br /><br />
            Zoom 8
        </div>
   </td>
    <td>
        <div class="justZoom"><br /><br...

CSS

td {
    position:relative;
}

table {
    border: 1px solid black;
    margin-top: 50px;
    margin-left: 50px;
    background-color: #CDF7CA;
}

div {
    background-image:url('http://userlogos.org/files/logos/pek/stackoverflow2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #73D680;
    border: 1px solid black;
    text-align: center;
    color: blue;
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 20px;
}

JavaScript

/*
     The .transit() jQuery plugin is loaded as a jsFiddle asset.
     For more info, check it out:  https://github.com/rstacruz/jquery.transit#readme
     
     More about jQuery .stop() here:
     http://css-tricks.com/examples/jQueryStop/
     
*/


// These 9 div effects are for the first table
//
// thumbnail-1   [1] Zoom
$(".thumbnail-1").hover(
    function () {
     $(this).stop(true,true).transition({ scale: 1.3 });
  }, 
    function () {
    $(this).stop(true,true).transition({ scale: 1.0 });
  }
);

// thumbnail-2   [2] Rotate-R
$(".thumbnail-2").hover(
    function () {
     $(this).stop(true,true).transition({ rotate: '30deg' });
  },
    function () {
    $(this).stop(true,true).transition({ rotate: '0deg' });
  }
);

// thumbnail-3   [3] Rotate-L
$(".thumbnail-3").hover(
    function () {
     $(this).stop(true,true).transition({ rotate: '-30deg' });
  },
    function () {
    $(this).stop(true,true).transition({ rotate: '0deg' });
  }
);

// thumbnail-4   [4] Move-Up
$(".thumbnail-4").hover(
    function () {
     $(this).stop(true,true).transition({ y: -40 });
  },
    function () {
    $(this).stop(true,true).transition({ y: 0 });
  }
);

// thumbnail-5   [5] Pivot-R
$(".thumbnail-5").hover(
    function () {
     $(this).stop(true,true).transition({rotate: '+=24deg', x: '+=24'});
  },
    function () {
    $(this).stop(true,true).transition({rotate: '0deg', x: '0'});
  }
);

// thumbnail-6   [6] Pivot-L
$(".thumbnail-6").hover(
    function () {
     $(this).stop(true,true).transition({rotate: '-=24deg', x: '-=24'});
  },
    function () {
    $(this).stop(true,true).transition({rotate: '0deg', x: '0'});
  }
);

// thumbnail-7   [7] Zoom-Up-R
$(".thumbnail-7").hover(
    function () {
        $(this).stop(true,true).transition({ scale: 2.0, x: '20', y: '-20' });
  },
    function () {
        $(this).stop(true,true).transition({ scale: 1.0, x: '0', y: '0' });
  }
);

// thumbnail-8   [8] Zoom-Up-C
$(".thumbnail-8").hover(
    function () {
 ...