JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cssload-contain">
        <div id="allthethings">
            <div class="cssload-preloader">
                <div class="cssload-preloader-box">
                    <div>L</div>
                    <div>o</div>
                    <div>a</div>
                    <div>d</div>
                    <div>i</div>
                    <div>n</div>
                    <div>g</div>
                </div>
            </div>
        </div>
    </div>
    
    <label id="one"></label>

CSS

#allthethings {
  width: 20%    ;
  height: 30%;
  left: 45%;
  top:35%;
  position:fixed;
  -webkit-transform: scale(2);
}

#cssload-contain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(248, 248, 248, 0.50);
    z-index: 1000;
}



.cssload-preloader {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10;
}

.cssload-preloader > .cssload-preloader-box {
	position: absolute;
	height: 29px;
	top: 50%;
    width:500px;
	margin: -15px 0 0 -146px;
	perspective: 195px;
		-o-perspective: 195px;
		-ms-perspective: 195px;
		-webkit-perspective: 195px;
		-moz-perspective: 195px;
}
.cssload-preloader .cssload-preloader-box > div {
	position: relative;
	width: 29px;
	height: 29px;
	background: rgb(204,204,204);
	float: left;
	text-align: center;
	line-height: 29px;
	font-family: Verdana;
	font-size: 19px;
	color: rgb(255,255,255);
}

JavaScript

$(document).ready(function(){
setTimeout(function(){
$("#one").html("finished loading");
$("#cssload-contain").hide();
},2000)
})