JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testDiv">
    <div class="inner">
        <p>testing</p>
    </div>
</div>

CSS

body {
    position: relative;
}
#testDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    color: #fff;
    text-align: center;
    content: "";
    opacity: 0;
    visibility: hidden;
}
#testDiv.showIt {
    opacity: 1;
    visibility: visible;
}
.inner {
    position: absolute;
    background: #000;
    width: 50%;
    height: 100%;
    content: "";
    top: 0;
    right: 0;
    opacity: 0;
}
#testDiv.showIt .inner {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}
p {
    position: absolute;
    top: 49%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    color: #fff;
}
.left {
    transform: translateX(20%);
}
.ease {
    transition-timing-function: ease;
}
.fast {
    transition-duration: 0.2s;
}

JavaScript

(function ($) {
    $.fn.testPlugin = function (options) {

        var settings = $.extend({
			showDiv: false,
            delayIt: null,
            trans: null,
            timing: null,
            speed: null,

        }, options);

        return this.each(function () {
            var self = this;
            
            // Show main
            if (settings.showDiv == true) {
                setTimeout(function () {
					$(self).addClass("showIt");
                }, settings.delayIt);
            };
            
            // Show inner
            $(".inner").addClass(settings.trans + " " + settings.timing + " " + settings.speed).css({
            	"transition-delay" : settings.delayIt / 1000 + 0.2 + "s", // if i delete this delay then inner div slides fine
            });
        
        });
    }
}(jQuery));

$(document).ready(function () {
    $("#testDiv").testPlugin({
		showDiv: true,
        delayIt: 500,
        trans: "left",
        timing: "ease",
        speed: "fast",
    });
});