JSFiddle - React, Tailwind, and code Playground

by Ghifari Aditya

HTML

<div class="page-wrapper">
    <div class="page main-page" id="root">
        <div class="group-container">
            <div class="book"></div>
            <div class="promo">
            	<div class="button">
            		<a href="/about">
            		<div class="button-logo cover-button-logo"></div>
            		<div class="button-text">Read the summary</div>
            		</a>
            	</div>

            	<div class="button">
            		<a href="#" onclick="return false;">
            		<div class="button-logo yt-button-logo"></div>
            		<div class="button-text">Watch the trailer</div>
            		</a>
            	</div>

            	<div class="button">
            		<a href="#" onclick="return false;">
            		<div class="button-logo wattpad-button-logo"></div>
            		<div class="button-text">Coming soon on Wattpad</div>
            		</a>
            	</div>

            	<div class="button">
            		<a href="" target="twitter">
            		<div class="button-logo twitter-button-logo"></div>
            		<div class="button-text">#Hashtag</div>
            		</a>
            	</div>

            	<div class="button">
            		<a href="" target="facebook">
            		<div class="button-logo facebook-button-logo"></div>
            		<div class="button-text">Share it on Facebook</div>
            		</a>
            	</div>
            </div>
        </div>
    </div>

    <div class="page about-page" id="about">
        <div class="group-container">
            <div class="summary">
                %Summary%
            </div>
            <div class="promo">
                <div class="button">
            		<a href="#" onclick="return false;">
            		<div class="button-logo yt-button-logo"></div>
            		<div class="button-text">Watch the trailer</div>
            		</a>
            	</div>

            	<div class="button">
            		<a href="#" onclick="return false;">
           ...

CSS

@charset "utf-8";

html{
	min-height: 100%;
	position: relative;
}

body{
	margin: 0;
	padding: 0;
	height: 100%;
	/*background: #2f99cd;*/
	overflow-x: hidden;
}

a,
a:link{
	color: #fff;
	text-decoration: underline;
}

a:hover{
	color: #fff;
	text-decoration: none;
}

/* Modal */
.modal{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal-bg-white{
	background: rgba(255, 255, 255, 0.5);
}

.modal-bg-loading{
	background: #0073e9;
}

/* Header */

.page-wrapper{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	overflow-x: hidden;
	overflow-y: auto;
	background: #0073e9;;
}

.page{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #0073e9;
}



/* Pages */

.main-page{
	left: 0;
}

.main-page.loading{
	top: 100%;
}

.about-page{
	left: 100%;
}

.trailer-page{
	left: 200%;
}

.dev-page{
	left: 0;
}

/* Promotional Page */

.group-container{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 100%;
	height: 617px;
	margin: 0;
	padding: 0;

}

.book{
	width: 350px;
	height: 547px;
	margin: 0 auto;
	background: #fff;
	background-size: 350px 547px;
}

.summary{
	width: 400px;
	height: 547px;
	margin: 0 auto;
	font-size: 20px;
	color: #fff;
}

/* Promotional Buttons */

.promo{
	width: 100%;
	margin: 30px 0 0 0;
	text-align: center;
}

.button{
	display: inline-block;
	height: 30px;
	border-radius: 5px;
	border: 5px solid #038acb;
	background: #009de9;
	color: #fff;
}

.button a{
	display: block;
	color: #fff;
	text-decoration: none;
}

.button a:hover,
.button a:active{
	background: #00abfe;
}

.button-text{
	display: inline-block;
	margin: 6.5px 5px 6.5px 5px;
}

.button-logo{
	display: inline-block;
	width: 25px;
	height: 25px;
	margin: 2.5px 0 2.5px 5px;
	background-position: center;
	background-size: 25px 25px;
	vertical-align: top;
}

/* Button Logo...

JavaScript

function pageInit(pageId)
	{
		$('.page-wrapper').animate({ scrollLeft: $('#' + pageId).offset().left }, 500);
		$('#' + pageId).css('postion', 'fixed');
		console.debug('Page #' + pageId + ' initiated.');
	}

	$(document).ready(function()
	{
		var location = window.location.pathname,
			rTarget = location.substring(1).split('/'),
			target = "",
			wWidth = $(window).width();

		if(location !== '/' && location !== '/index.html' && location !== 'index.php')
		{
			for(i = 0; i < rTarget.length; i++)
			{
				if(i !== 0 && i !== (rTarget.length - 1))
					target += "/";

				if(rTarget[i] !== "index.html" && rTarget[i] !== "index.php")
					target += rTarget[i];
			}
			window.history.pushState('string', 'Being the One | A True Story', '/' + target);
		}
		else
		{
			target = 'root';
			window.history.pushState('string', 'Being the One | A True Story', '/');
		}

		console.debug(location);
		console.debug(target);

		// target = "about";
		setTimeout(function()
		{
			pageInit(target);
		}, 500);

		$('a').click(function()
		{
			var target = $(this).attr('href'),
				local;

			console.debug(target);
			if(!(target.substring(0,7) == "http://" || target.substring(0,8) == "https://" || target.substring(0,2) == "//"))
			{
				if(target !== '/' && target !== '#')
					local = target.substring(1);
				else if(target == '#')
					return false;
				else
					local = "root";

				console.debug(local);
				window.history.pushState('string', 'Being the One | A True Story', target);
				$('.page-wrapper').animate({ scrollLeft: $('#' + local).offset().left }, 500);
				return false;
			}
		});
	});

	$(window).resize(function()
	{
		pageInit('about');
	});