JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-helpers.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-anim.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-core.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-zoomTarget.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-zoomContainer.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/purecssmatrix.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/sylvester.src.stripped.js"></script>

 <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);
    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);
    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);
}

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

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

JavaScript

(function ($) {
    $.fn.animText = function (duration, options) {
        var opts = $.extend({
            duration: (duration == undefined ? 1000 : duration),
            easing: 'easeOutQuad',
            start: 0,
            type: null,
            formatNumber: true
        }, options);

        function formatNumber(num, go) {
            if (!go) return num;
            var str = num.toString().split('.');
            if (str[0].length >= 4) str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
            if (str[1] && str[1].length >= 4) str[1] = str[1].replace(/(\d{3})/g, '$1 ');
            return str.join(',')
        }
        this.each(function () {
            var animator = $('<div/>'),
                elem = $(this),
                value = elem.attr('data-value'),
                display = elem.attr('data-display');
            if (opts.type === null) opts.type = (/^\d*$/.test(value)) ? 'number' : 'text';
            if (opts.type == 'text') {
                var i = 0,
                    tabledValue = [],
                    openedTag = false;
                while (i < value.length) {
                    i++;
                    if (value.substr((i - 1), 6) == '<br />') i = i + 6;
                    if (value.substr((i - 1), 1) == '<') {
                        if (value.substr(i, 1) == '/') {
                            i = i + openedTag.length;
                            openedTag = false;
                            if (value.substr((i - 1), 6) == '<br />') i = i + 6
                        } else {
                            var tag;
                            while (value.substr((i - 1), 1) != '>') {
                                tag += value.substr((i - 1), 1);
                                i++
                            }
                            i++;
                            tag += '>';
                            var html = /\<[a-z]+/i.exec(tag);
                            if (html !== null) {
                      ...