JSFiddle - React, Tailwind, and code Playground

HTML

<body> 
	<div id="loader-wrapper"> 
		<div id="loader"></div> 
		<div class="loader-section section-left"></div> 
		<div class="loader-section section-right"></div> 
	</div> 

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque nibh, scelerisque a placerat ac, blandit et urna. Etiam vel ornare lacus. Nullam placerat a metus et eleifend. Suspendisse potenti. Pellentesque cursus purus in lorem eleifend molestie. Proin placerat laoreet quam non varius. Integer tincidunt at eros vel cursus. Pellentesque sit amet lacus sit amet risus facilisis sodales. Etiam sit amet efficitur dui. Suspendisse potenti. Nulla interdum, ante eu gravida tempus, metus lacus suscipit ante, id luctus eros turpis sed dui. Aliquam hendrerit, erat vel convallis tincidunt, libero nunc tempus ipsum, sed aliquet dolor eros a leo. Sed non varius justo.</p> 
	<p>Nunc suscipit velit non ante sagittis aliquam. Suspendisse consequat ante augue, sed luctus quam pulvinar ut. Etiam tempus nunc quam, sed facilisis mauris hendrerit sit amet. Nam orci neque, mollis in dignissim et, dignissim et lorem. Ut consequat interdum fringilla. Nunc laoreet tellus ipsum, non lobortis massa mattis at. Quisque lacinia arcu et lacus malesuada, ac interdum nibh fermentum. Vestibulum interdum erat ut laoreet feugiat. Morbi tellus nulla, hendrerit vitae nulla nec, luctus faucibus eros. Donec consequat massa nec ipsum mollis, a sollicitudin est sodales. Nam vulputate, odio eu consequat mollis, leo nisl tempus augue, vitae porttitor nunc nunc ut lorem.</p> 
	<p>Aenean commodo congue lectus, vel hendrerit lorem tincidunt sed. Pellentesque ultricies tellus vitae tincidunt bibendum. Phasellus maximus justo vitae justo vestibulum mollis. Phasellus scelerisque urna turpis, in ornare tellus cursus ut. Cras ac cursus lorem, nec rhoncus metus. In porttitor cursus dolor ut mattis. Curabitur auctor nisl non sem luctus molestie. Fusce varius leo a varius porta.</p> 
	<p>Proin fermentum lectus venenatis leo...

CSS

#loader:after, 
		#loader:before { 
		    position: absolute; 
		    content: "" 
		} 
		#loader:after, 
		#loader:before { 
		    content: "" 
		} 
		#loader-wrapper { 
		    position: fixed; 
		    top: 0; 
		    left: 0; 
		    width: 100%; 
		    height: 100%; 
		    z-index: 1000 
		} 
		#loader { 
		    display: block; 
		    position: relative; 
		    left: 50%; 
		    top: 50%; 
		    width: 150px; 
		    height: 150px; 
		    margin: -75px 0 0 -75px; 
		    border-radius: 50%; 
		    border: 4px solid transparent; 
		    border-top-color: #fff; 
		    -webkit-animation: spin 2s linear infinite; 
		    animation: spin 2s linear infinite; 
		    z-index: 1001 
		} 
		#loader:before { 
		    top: 5px; 
		    left: 5px; 
		    right: 5px; 
		    bottom: 5px; 
		    border-radius: 50%; 
		    border: 4px solid transparent; 
		    border-top-color: #fff; 
		    -webkit-animation: spin 3s linear infinite; 
		    animation: spin 3s linear infinite 
		} 
		#loader:after { 
		    top: 15px; 
		    left: 15px; 
		    right: 15px; 
		    bottom: 15px; 
		    border-radius: 50%; 
		    border: 4px solid transparent; 
		    border-top-color: #fff; 
		    -webkit-animation: spin 1.5s linear infinite; 
		    animation: spin 1.5s linear infinite 
		} 
		@-webkit-keyframes spin { 
		    0% { 
		        -webkit-transform: rotate(0); 
		        -ms-transform: rotate(0); 
		        transform: rotate(0) 
		    } 
		    100% { 
		        -webkit-transform: rotate(360deg); 
		        -ms-transform: rotate(360deg); 
		        transform: rotate(360deg) 
		    } 
		} 
		@keyframes spin { 
		    0% { 
		        -webkit-transform: rotate(0); 
		        -ms-transform: rotate(0); 
		        transform: rotate(0) 
		    } 
		    100% { 
		        -webkit-transform: rotate(360deg); 
		        -ms-transform: rotate(360deg); 
		        transform: rotate(360deg) 
		    } 
		} 
		#loader-wrapper .loader-section { 
		    position: fixed; 
		    top: 0; 
		    width: 51%; 
		    height: 100%;...