JSFiddle - React, Tailwind, and code Playground

HTML

<div class="webFade">
	<div class="quickStart">&nbsp;</div>
</div>



<button class="getStarted">GET STARTED</button>

CSS

.webFade {
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	padding: 0px;
	margin: 0px;
	z-index: 99999;
}

.quickStart {
	position: relative;
	display: none;
	margin:20% auto;
	background: #fff;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	-ms-border-radius:7px;
	border-radius:7px;
	width: 500px;
	height: 500px;
	z-index: 999999;
}

JavaScript

// Some global values needed for webFade and QuickStart
		var pageW = $(document).width();
		var pageH = $(document).height();

		$('.getStarted').click(function(){
			$('.webFade').css('width',pageW + 'px');
			$('.webFade').css('height',pageH + 'px');

			$('.webFade').fadeIn('fast');

			$('.quickStart').slideDown('slow');
		});

		$('.webFade').click(function(){
			$(this).fadeOut('fast');
			$('.quickStart').slideUp('slow');
		});