JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Coverflow13</title>
    <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>-->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="cover13.js"></script>
    <style type="text/css" media="screen">
        #cover,
        input {
            float: left;
        }
        #cover img {
            padding: 15px 15px 0;
            float: left;
            width: 60px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <input type="button" id="cover_prev" value="Previous" />
    <div id="cover">
        <img src="img/bouteille.png" alt="" />
        <img src="img/bouteille.png" alt="" />
        <img src="img/bouteille.png" alt="" />
        <img src="img/bouteille.png" alt="" />
        <img src="img/bouteille.png" alt="" />
    </div>
    <script type="text/javascript">
        jQuery(window).load(function() {
            jQuery.fn.cover13('#cover', {
                prev: '#cover_prev'
            });
        });
    </script>
</body>
</html>

JavaScript

;(function($) {

    var _semaphore_coverflow_is_animating = 0;
    var duration = 300;
    var fxinterval = 40; // for FPS tuning, jQuery defaults to 13
    var container = '';
    var prev_button = '';
    var next_button = '';

    $.extend($.fn, {

        // INIT FUNCTION
        cover13: function(cont, opts){
            // performances : reduit les FPS demandees par jQuery
            // $.fx.interval = 100;
            _semaphore_coverflow_is_animating = 0;
            container = cont;
            if (opts) {
                if (opts.prev) {
                    prev_button = opts.prev;
                }
                if (opts.next) {
                    next_button = opts.next;
                }
                if (opts.fxinterval) {
                    fxinterval = opts.fxinterval;
                }
            }
            $.fx.interval = fxinterval;
            $(container).css('overflow', 'hidden');
            $(container + ' > img').css('margin', 0);
            nb = $(container).find('img').length;
            midnb = parseInt(Math.ceil(parseFloat(nb / 2)));
            base_increment_pc = parseFloat(100 / midnb);
            $(container).find('img').each(function() {
                var col = parseInt(1 + $(container).find('img').index(this));
                var increment = parseFloat(Math.abs(parseInt(midnb - col)) * base_increment_pc / 100);
                $(this).css('opacity', parseFloat(1 - increment))
                // resize
                // $(this).css('height', parseFloat(100 - parseFloat(increment * 30)) + '%')
            });
            ghost_prev = $(container).find('img').first().clone().css('marginLeft', 0).css('opacity', 0).css('paddingTop', 15);
            ghost_next = $(container).find('img').last().clone().css('marginLeft', 0).css('opacity', 0).css('paddingTop', 15);
            $(container).append(ghost_prev);
            $(container).prepend(ghost_next);
            normalheight = ghost_prev.height();
           ...