JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script type="text/javascript" src="http://jaukia.github.io/zoomooz/src/js/jquery.zoomooz-helpers.js"></script>
<script type="text/javascript" src="http://jaukia.github.io/zoomooz/src/js/jquery.zoomooz-anim.js"></script>
<script type="text/javascript" src="http://jaukia.github.io/zoomooz/src/js/jquery.zoomooz-core.js"></script>
<script type="text/javascript" src="http://jaukia.github.io/zoomooz/src/js/jquery.zoomooz-zoomTarget.js"></script>
<script type="text/javascript" src="http://jaukia.github.io/zoomooz/src/js/jquery.zoomooz-zoomButton.js"></script>
<script type="text/javascript" src="http://jaukia.github.io/zoomooz/src/js/jquery.zoomooz-zoomContainer.js"></script>
<script type="text/javascript" src="http://jaukia.github.io/zoomooz/src/js/purecssmatrix.js"></script>
<script type="text/javascript" src="http://jaukia.github.io/zoomooz/src/js/sylvester.src.stripped.js"></script>

<div class="shape shape-skew zoomTarget" data-targetsize="0.45" data-duration="600">Skew</div>

            <div class="shape shape-scale zoomTarget" data-targetsize="0.45" data-duration="600">Scale</div>

            <div class="shape shape-rotation zoomTarget" data-targetsize="0.45" data-duration="600">Rotate</div>

CSS

.shape {
    float:left;
    width:80px;
    height:80px;
    text-align:center;
    color:white;
    font-weight:500;
    line-height:70px;
    border-radius:3px;
    margin-bottom:40px;
}

.shape-skew {
    background-color:#090;
    -webkit-transform:skewX(15deg) skewY(10deg);
    -moz-transform:skewX(15deg) skewY(10deg);
    -ms-transform:skewX(15deg) skewY(10deg);
    -o-transform:skewX(15deg) skewY(10deg);
    margin-right:55px;
}

.shape-skew:hover {
    background-color:#0b0;
}

.shape-skew.selectedZoomTarget:hover {
    background-color:#090;
}

.shape-scale {
    -webkit-transform:scaleX(0.7) translateY(0px);
    -moz-transform:scaleX(0.7) translateY(0px);
    -ms-transform:scaleX(0.7) translateY(0px);
    -o-transform:scaleX(0.7) translateY(0px);
    background-color:#27c;
    margin-right:50px;
}

.shape-scale:hover {
    background-color:#49e;
}

.shape-scale.selectedZoomTarget:hover {
    background-color:#27c;
}

.shape-rotation {
    background-color:#c43;
    -webkit-transform: rotate(-50deg) translateX(-60px);
    -moz-transform:rotate(-50deg) translateX(-60px);
    -ms-transform:rotate(-50deg) translateX(-60px);
    -o-transform:rotate(-50deg) translateX(-60px);
}

.shape-rotation:hover {
    background-color:#e64433;
}

.shape-rotation.selectedZoomTarget:hover {
    background-color:#c43;
}