JSFiddle - React, Tailwind, and code Playground

by Fiddel

HTML

<div class="wrapper">
	<div class="content">
	<h1>
	Lorem ipsum
	</h1><p>
	dolr sed amet 
	</p>
	</div>
	<div class="content">
	<p>
	dolr sed amet 
	</p>
	</div>
	<div class="content">
	<p>
	dolr sed amet 
	</p>
	</div>
	<div class="content">
	<p>
	dolr sed amet 
	</p>
	</div>
</div>

<div id="animationLayer">
	<span></span>
</div>

CSS

html, 
body {
	height:100%;}
	
	body {
	width:100%;
	margin:0;}
	
	

.wrapper {
	display:flex;
	width:50%;
	height:100%;
	margin:0 auto;	
	background-color:#003d85;
}
.wrapper > div {
	background-color:#fff;
	
	height:auto;
	margin:1rem;
	padding:1rem;
	
	align-items:stretch;
	
}

#animationLayer {
	display: -webkit-flex;
  display:flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
					
	position:fixed;
	z-index:1;top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,61,133,.9);
}


#animationLayer > span {
  display:block;
	
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
 
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
...