JSFiddle - React, Tailwind, and code Playground

CSS

body {
    background-color:#000;
    color:#fff;
}
.loading {
    margin-left: auto;
    margin-right: auto;
    color:#fff;
    position:absolute;
    top:42%;
    left:35%;
    text-align:center;
    width:250px;
}
.loading h2 {
    color:#fff;
    text-align:center;
}
/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #fff; background: #ffffff url(images/ui-bg_glass_75_ffffff_1x400.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { background: #000; color: #222222; font-weight: bold; height:8px; }
.ui-widget-header a { color: #222222; }

JavaScript

$(document).ready(function () {
$('body').append("<div class='loading'><div id='progressbar'></div><h4>loading...<span class='percent'></div></h4></div>");

    var count = 1,
        countdown = setInterval(function () {

            // add the progress bar then 
            $("#progressbar").progressbar({
                value: count
            });


            if (count == 100) {
                $('.loading').hide();
                $('body').append('<h1>Hi i am loaded</h1>').fadeIn('slow');

                $(".percent").html(count);
                
                setTimeout(function(){ 
     $(".topbar-inner").animate({
                    top: "+=45px",
                }, 'slow');
                $(".footer").animate({
                    'bottom': '+=200px'
                }, 'slow', function () {

                    var winheight = $(window).height();
                    var ttop = winheight / 2;
                    var ptop = ttop / 2;
                    var ptop = ptop / 2;
                    // add css to container
                    var cssObj = {
                        'height': Math.round(ttop) + 'px',
                        'width': '360px',
                        'padding': '45px',
                        'display': 'block',
                        'overflow': 'hidden',
                        'position': 'absolute',
                        'color': 'blue',
                        'background-color': 'blue',
                        'top': Math.round(ptop) + 'px',
                        'left': '-450px'
                    }

                    $('.home_page').css(cssObj);

                    $(".home_page").animate({
                        'left': '+=450px'
                    }, 'slow', function () {
                        $('.newsletter').fadeIn();
                    });
                });
  }, 1000 ); 
                
               
            } // end if count
            count++;
}, 10);
 });