JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery.js"></script>
<script src="https://github.com/jquery/jquery/raw/888635f8c17e857ff98a931451ee54aecddabbca/src/css.js"></script>
<script src="https://github.com/jquery/jquery/raw/888635f8c17e857ff98a931451ee54aecddabbca/src/effects.js"></script>
<div id="container"><div id="target"></div></div>
<input type="button" id="go" value="Go">

CSS

#container {
    width: 284px;
    height: 10px;
    border: 3px solid black;
}
#target {
    height: 10px;
    background: blue;
    
}

JavaScript

function duckPunch() {
    $.Animation.tweener(function( prop, value ) {
        var end, unit,
            tween = this.createTween( prop, value ),
            parts = /*rfxnum*/ /^([\-+]=)?((?:\d*\.)?\d+)([a-z%]*)$/i.exec( value ),
            start = tween.cur(),
            scale = 1,
            target = start;
        
        if ( parts ) {
            end = +parts[2];
            unit = parts[3] || ( jQuery.cssNumber[ prop ] ? "" : "px" );
                                
            // We need to compute starting value
            if ( unit !== "px" && start ) {
                // Iteratively approximate from a nonzero starting point
                // Prefer the current property, because this process will be trivial if it uses the same units
                // Fallback to end or a simple constant
                start = parseFloat( jQuery.style( tween.elem, prop ) ) || end || 1;
                
                do {
                    // If previous iteration zeroed out, double until we get *something*
                    scale = scale || 0.5;
                    
                    // Adjust and apply
                    start = start / scale;
                    jQuery.style( tween.elem, prop, start + unit );
                    
                // Update scale, tolerating zeroes from tween.cur()
                // Stop looping if scale is unchanged or we've hit the mark
                } while ( scale !== (scale = tween.cur() / target) && scale !== 1 );
            }
            
            tween.unit = unit;
            tween.start = start;
            // If a +=/-= token was provided, we're doing a relative animation
            tween.end = parts[1] ? start + end * ( parts[1] === "-=" ? -1 : 1 ) : end;
        }
        
        return tween;
    });
}

$(function () {
    duckPunch();
    
    // Set width to one-third without pixels or percent
    // Use a tiny numeric part to exercise the scaling loop
    var cssReset = { fontSize: '98.6in',...