JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrappercs">
  <ul id="valuecanvas2">
    <li>
      <ul id="gainsAnimation">
      <li id="gains2"></li>
	    <li id="gainscreaters2"></li>
      </ul>
    </li>
	  
    <li id="jobs2" ></li>
    <li id="pains2" ></li>
    <li id="services2"></li>
    <li id="painreleavers2"></li>
 </ul>
</div>

CSS

/* valuecanvas */

#wrappercs {
	margin-top: 3px;
	width: auto;
	height: auto;
	display: block;
	float: right;
	background: url(http://i67.tinypic.com/30ayjhg.jpg);
	border: 2px solid; 
}
#valuecanvas2 {
	width: 640px;
	height: 297px;
	background:url(http://i65.tinypic.com/2kfu6f.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
	padding: 0px;
}
#valuecanvas2 li {
    margin: 0; 
	padding: 0; 
	list-style: none;
    position: absolute; 
	top: 0;
}
#valuecanvass2 li, #valuecanvas2 a {
    height: 200px; 
	display: block;
}

/* Gains + gainscreaters */

#gains2 {
	background:url(http://i64.tinypic.com/j73t55.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 245px;
	height: 143px;
	left: 338px;
	top: 7px !important;
	-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}
#gainsAnimation:hover #gains2 {
	background:url(http://i65.tinypic.com/14433ad.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 245px;
	height: 143px;
	left: 338px;
	top: 7px !important;
	 -webkit-transform: translate(-15px, -20px);
    -moz-transform: translate(-15px, -20px);
    -o-transform: translate(-15px, -20px);
    -ms-transform: translate(-15px, -20px);
    transform: translate(-15px, -20px);
}
#gainsAnimation:hover #gainscreaters2{  	
	background:url(http://i64.tinypic.com/micsw5.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 286px;
	height: 139px;
	left: 16px;
	top: 7px !important;
	 -webkit-transform: translate(15px, -15px);
    -moz-transform: translate(15px, -15px);
    -o-transform: translate(15px, -15px);
    -ms-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
	}
#gainscreaters2 {
	background: url(http://i67.tinypic.com/imqgx4.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 286px;
	height: 139px;
	left: 16px;
	top: 7px !important;
	-webkit-transition: width 2s, height 2s,...