JSFiddle - React, Tailwind, and code Playground

by srmor

HTML

<div id="pgHide" style="display: block; "><span id="centerMessage">Creating...</span></div>

CSS

#pgHide {
         position: fixed;
         top: 0;
         left: 0;
         height: 100%;
         width: 100%;
         background: black;
         opacity: .6;
        }

#pgHide span {
               color: white;
               font-size: 1.3em;
               margin: auto;
               display: inline-block;
               background: #415493;
               padding: 20px;
               -webkit-border-radius: 3px;
               opacity: 1.7;
             }

JavaScript

var winWidth = $(window).width();
var winHeight = $(window).height();
var positionLeft = (winWidth/2) - 62;
var positionTop = (winHeight/2) - 32;

$('#centerMessage').ccs("position","absolute");
$('#centerMessage').ccs("top",positionTop);
$('#centerMessage').ccs("left",positionLeft);