JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
		<div class="header title">Some Big Header Goes Here</div>
		<div class="sub-header title">The fancyness enters here.</div>
		<a href="#">A random link</a>
	</div>
	<div class="middle">
		<div class="left col half">
			<div class="title">Header</div>
			<ul class="ulist">
				<li class="ulisti">Data</li>
				<li class="ulisti">Data</li>
				<li class="ulisti">Data</li>
				<li class="ulisti">Data</li>
				<li class="ulisti">Data</li>
				<li class="ulisti">Data</li>
			</ul>
		</div>
		<div class="right col half">
			<div class="info summary">
				<p>Summary goes here ma. Yep. Woo. Ahahahaha. Woo. Yeah<p>
				<p><strong>Extra:</strong>Some little details</p>
			</div>
			<div class="info detail">
				<p>So much detail crammed here. I don't know how I will contain it.</p>
				<p>112345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v12345 v2345 v<p>
				<span> Random span element </span>
			</div>
		</div>
	</div>
	<div class="bottom">
		<div class="footer full-width">
			<div class="iblock fitem">Footer Item 1</div>
			<div class="iblock fitem"><a href="#">Footer Item 2</a></div>
			<div class="iblock fitem">Footer Item 3</div>
		</div>
	</div>

CSS

body {
		background:black;
		color:transparent;
		text-shadow:0px 0px 1px lime;
		font:100% 'Courier New',Courier,monospace;
		margin:0 auto;
		border:0;
		padding:0;
		width:100%;
		height:auto;
	}
	a {
		color:lime;
	}
	.header {
		padding:2%;
	}
	.sub-header {
		font-size:120%;
		font-style:italic;
	}
	.title {
		font-size:158%;
		line-height:80%;
	}
	.top {
		display:block;
		text-align:center;
		border:1px solid lime;
		padding:1%;
	}
	.top a {
		display:block;
		padding:1%;
		margin:0 auto;
	}
	.middle {
		display:block;
		border:1px solid lime;
	}
	.bottom {
		display:block;
		border:1px solid lime;
	}
	.col {
		display:inline-block;
		vertical-align:top;
	}
	.half {
		width:46%;
		padding:1%;
	}
	.footer {
		padding:1%;
		width:98%;
		text-align:center;
	}
	.footer .fitem {
		display:inline-block;
		margin:0 auto;
		padding-left:10%;
		padding-right:10%;
	}
html {
	background:black;
	width:100%;
	height:100%;
	border:0;
	margin:0 auto;
	padding:0;
}
.hided {
	visibility:hidden;
}
.mask {
	z-index:100000000;
	position:fixed;
	border:0;
	background:black;
	border-left:10px solid rgba(0,255,0,0.8);
	margin:0 auto;
	padding:0;
}

JavaScript

var all_in_order = $('*:not("html,script,head,style,link")');
	console.log(all_in_order);
	function setup_mask() {
		var mask = $('<div class="hided"></div>');
		mask.addClass('mask');		
		$('html').append(mask);
		return mask;
	}
	var scan_mask = setup_mask();
	function locate_mask_at(el,msk) {
		if($(msk).hasClass('hided')) {
			$(msk).removeClass('hided');
		}
		var rect = $(el)[0].getBoundingClientRect();
		$(msk)[0].style.width = rect.width+2+'px';
		$(msk)[0].style.height = rect.height+2+'px';
		$(el)[0].style.visibility = "visible";
		var off = $(el).offset();
		off.left -= 1; off.top -= 1;
		$(msk).offset(off);
	}
	function scan_reveal() {
		var el = this;
		var length = $(el).width();
		var height = $(el).height();
		var textNodes = $(el).contents().filter( function () {
			return this.nodeType == 3 && this.nodeValue.trim().length > 0;
			} );
		if(textNodes.length > 0) {
			$(el)[0].style.visibility = 'hidden';
		}
		return textNodes.length > 0;
	}
	var sizer = $('<div> </div>');
	var scannable_elements = all_in_order.filter( scan_reveal );
	function run_scan(el,mask,callback) {
		// we need to go over each line of text in here
		// or somewhere
		var el_font_size = $(el).css('font');
		$('body').append(sizer);
		sizer.css({
			'position': 'absolute',
			'font' : el_font_size,
			'white-space' : 'pre' } );
		var real_box = window.getComputedStyle(sizer[0]);
		var real_width = parseFloat(real_box.width);
		var real_height = parseFloat(real_box.height);
		var lines = Math.round($(el).height()/real_height);
		var mask_offset = $(mask).offset();
		var origin_left = mask_offset.left;
		var duration = parseFloat($(mask).width())*2.0;
		$(mask).animate( {
			'left':origin_left+$(mask).width()
			},
			{
				duration:duration,
				complete:callback
			} );
	}
	function scan_page(scannable,mask,i) {
		i = i || 0;
		if(i >= scannable.length) {
			return; // scan finished
		}
		var current_el = scannable[i];	
		locate_mask_at(current_el,scan_mask);
		function...