JSFiddle - React, Tailwind, and code Playground

by David Joseph Guzsik

HTML

<div class="pageSlider">
			<a href="#lounge" class="active">Visitor's Lounge</a>
			<a href="#streams">News Stream</a>
			<a class="slide-button"></a>
		</div>

CSS

body {
    background-color:#777;    
}

@media all and (max-width: 500px){
	.pageSlider {
		white-space: normal;
	}
	.pageSlider a[href]{
		display: block !important;
		width: 100% !important;
	}
	.pageSlider a[href].active {
		background-color: #cccc00;
	}
	.pageSlider .slide-button {
		display: none;
	}
}

.pageSlider {
	margin: 15px auto !important;
	font-size: 1.2em;
	white-space: nowrap;
	height: 35px;
}
.pageSlider a[href] {
	display: inline-block;
	text-align: center;
	text-decoration: none;
    color: #fff;
	position: relative;
	
	z-index: 2;
}
.pageSlider a[href].active {
	color: #000;
}
.pageSlider .slide-button {
	background-color: #cccc00;
	position: relative;
	top: -35px;
	display: inline-block;
	padding: 0;
	float: left;
	height: inherit;

	z-index: 1;
}

JavaScript

(function($){
	/**
		URL Parsing Function v1.5
		by DJDavid98 - created for EQReverb.com ("site").
		2013 (c) EQReverb.com
		
		You may not copy or redistribute this script in parts or in whole,
		it can only be used on the site and its subdomains.
		
		@requires jQuery
	**/
	$.parseURL = function(str) {
		if (typeof str === 'undefined' && typeof window.location.href !== 'undefined') str = window.location.href;
		var check = {
				whole: /^((http|https):\/\/)?((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/.*/,
				protocol: /^(http|https):\/\//,
				absolute: /^\/\/((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\//,
				relative: /^[\/](?!\/).*(\..*|\/)?.*$/,
				params: /\?.*=.*(\&.*\=.*)+[^#.*]/,
			},
			r = {
				protocol:		undefined,
				hostname:		undefined,
				hash:			undefined,
				href: {
					original:	undefined,
					noparams:	undefined,
				}, 
				parentDomain:	undefined,
				parameters:		undefined,
				pathname: 		{
					nohash:		undefined,
					withhash:	undefined,
				},
				type:			undefined,
			};
		if (typeof str !== 'string') throw new TypeError('Argument must be a string!');
		else if (!check.whole.test(str) && !check.absolute.test(str) && !check.relative.test(str)) throw new Error('Invalid string');
		
		r.href.original = str;
		
		if (str.indexOf('#') !== -1){
			r.hash = str.substring(str.indexOf('#'));
			str = str.substring(0,str.indexOf('#'));
		}
		if (check.params.test(str)){
			r.parameters = {};
			var urlparams = str.match(check.params)[0].substring(1).split("&");
			for (var i=0,l=urlparams.length; i<l; i++){
				var item = urlparams[i].split('=');
				r.parameters[item[0]] = item[1];
			}
			str = str.replace(check.params,'');
			r.href.noparams = str+(typeof r.hash !== 'undefined' ? r.hash : '');
		}
		if (check.protocol.test(str)){
			r.protocol = str.match(check.protocol)[0];
			r.hostname = str.replace(check.protocol,'');
			r.hostname =...