JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/alevkon/smooth/master/smooth.js"></script>
<html>
    <head>
    </head>
    <body>
        <div id="wrapper">
            <div id="subject">
                Test box
            </div>
            <div class="controls">
                <button data-handler="reset" class="handle">Reset</button>
                <button data-handler="skewAndFade" class="handle">Skew & fade</button>
                <button data-handler="skewThenFade" class="handle">Skew, then fade</button>
            </div>
            <div class="controls">
                <p>Mode: <span id="mode"></span></p>
                <button data-mode="jquery" class="mode">Use jQuery</button>
                <button data-mode="css" class="mode">Use CSS</button>
            </div>
        </div>
    </body>
</html>

CSS

#wrapper {
    width:500px;
    padding: 20px;
    text-align:center;
}
#subject {
    background: #ccc;
    padding: 20px 40px;
    font-size:24px;
    border: 4px solid #333;
    display:inline-block;
    white-space: nowrap;
    width:100px;
    margin-bottom:20px;
}

JavaScript

$(function() {
    var handlers = {
        reset: function () {
            $("#subject").css({
                "transition":""
            });
        
            $("#subject").css({
                transform: "",
                opacity: ""
            });
        },
        
        skewAndFade: function () {
            $("#subject").smooth({
                opacity: 0.2,
                transform:"matrix(1, 0, -0.5, 1, 0, 0)"
            },{
                duration: 1000,
                easing: "swing"
            })
                .done(function() {
                    return;
                    $("#target").smooth({
                        height: 300,
                        opacity: 1
                    });
                })
        },
        
        skewThenFade: function () {
            $("#subject").smooth({
                transform:"matrix(1, 0, -0.5, 1, 0, 0)"
            })
            .done(function() {
                $("#subject").smooth({
                    opacity: 0.2
                });
            })
        }
    };
    
    $("#mode").text($.fn.smooth.settings.mode);
    
    $('.mode').click(function(e) {
        e.preventDefault();
        setMode($(this).data('mode'));
    });
    
    $('.handle').click(function(e) {
        e.preventDefault();
        var handler = $(this).data('handler');
        if (handler && typeof handlers[handler] == "function") {
            handlers[handler]();
        }
    });
});

function setMode(mode) {
    $.fn.smooth.configure({
        mode: mode
    });
    $("#mode").text($.fn.smooth.settings.mode);
}