JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
  <main>
    <ul class="nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
    <div class="main-content">
      <h1>Home</h1>
    </div>
  </main>
  <div class="cd-cover-layer"></div>
  <div class="loader"></div>
</div>

CSS

*, *::after, *::before {
	box-sizing: border-box;
}
html, body {
	height: 100%;
	line-height: 170%;
}
body {
	font-family: sans-serif;
	font-size: 14px;
	line-height: 1.5;
	font-style: normal;
	font-weight: 400;
	color: #fff;
	background: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
	padding: 0;
}
body::after, body::before {
	/* these are the 2 half blocks which cover the content once the animation is triggered */
	content: '';
	height: 50vh;
	width: 100%;
	position: fixed;
	left: 0;
	background-color: #ffffff;
	z-index: 1;
	/* Force Hardware Acceleration */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition: -webkit-transform 0.4s 0.4s;
	-moz-transition: -moz-transform 0.4s 0.4s;
	transition: transform 0.4s 0.4s;
}
body::before {
	top: 0;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
body::after {
	bottom: 0;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
}
body.loading::after, body.loading::before {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: -webkit-transform 0.4s 0s;
	-moz-transition: -moz-transform 0.4s 0s;
	transition: transform 0.4s 0s;
}
.nav {
	display: inline-block;
	margin: 0 auto;
	padding: 1em 3em;
	list-style: none;
	position: fixed;
	z-index: 9999
}
.nav li {
	display:...

JavaScript

jQuery(document).ready(function(event){   
  
  $('.nav li a').on('click', function(event){
    event.preventDefault();
    
    var url = $(this).attr('href');
    $('body').removeClass('loading');
     
  });

})(jQuery);