JSFiddle - React, Tailwind, and code Playground

by jarod51

HTML

<nav>
			<ul>
				<li class="active">
					<a href="#home">Home</a>
				</li>  
				<li>
					<a href="#newsletter">Newsletter</a>
				</li>  
				<li>
					<a href="#directions">Directions & Opening Hours</a>
				</li>  
				<li>
					<a href="#contact">Contact us</a>
				</li>
			</ul>
			<button id="prev"></button>
			<button id="next"></button>
		</nav>
		<div id="wrapper">
			<section id="home" class="table active">
				<h2>Home</h2>
			</section>
			<section id="newsletter" class="table">
				<h2>Newsletter</h2>
			</section>
			<section id="directions" class="table">
				<h2>Directions</h2>
			</section>
			<section id="contact" class="table">
				<h2>Contact</h2>
			</section>
		</div>

CSS

/* FIX */

	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, input, textarea, button, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
		margin:0;
		padding:0;
		border:none;
		outline:0;
		float:none;
		vertical-align:baseline;
		-webkit-font-smoothing:auto;
	}

	body {
		font-weight: normal;
		color: #444;
		font-family: arial,helvetica;
	}

	body, #wrapper, .table {
		height: 100%;
		overflow: hidden;
		position: relative;
	}

	li {
		list-style: none;
	}

	a {
		text-decoration: none;
	}

	nav {
		width: 100%;
		height: 60px;
		background: #EEE;
		border-bottom: 1px solid #CCC;
		top: 0;
		left: 0;
		position: fixed;
	}

	nav ul {
		padding: 5px 10px;
	}

	nav li {
	   display: inline-block; 
	}
	
	nav li a {
		color: #444;
		padding: 10px;
		margin: 0 10px;
		border-radius: 0 0 2px 2px;
	}
	
	nav li a:hover {
		background: #CCC;
	}

	/* ID */

	#wrapper {
		width: 400%; /* 100 multiplied by the number of sections ( 4 ) */
		margin: 0 auto;
		margin-top: 60px; /* nav height */
	}

	#wrapper > section {
		width: 25%; /* 100 divided by the number of sections ( 4 ) */
		float: left;
	}

	#prev, #next {
		width: 20px;
		height: 20px;
		background: #FFF;
		border: 1px solid #CCC;
		border-radius: 30px;
		bottom: 5px;
		position: absolute;
		cursor: pointer;
	}

	#prev {
		left: 20px;
	}

	#prev:before {
		content: "<";
	}

	#next {
		left: 45px;
	}

	#next:before {
		content: ">";
	}

	/* CLASS */

	.table {
		width: 100%;
		display: table;
	}

JavaScript

$(function () {
	
		var obj = {
			animation: {
				element: $( "#wrapper" ),
				countElements: $( "#wrapper > section" ).length,
				currentPosition: 0,
				direction: [ "+", "-" ],
				revertSigns: function ( sign ) {
					return ( sign === obj.animation.direction[ 0 ] ) ? obj.animation.direction[ 1 ] : obj.animation.direction[ 0 ];
				},
				verifyPosition: function ( direction, range ) {
					if ( direction ) {
						range = range ? range : 1;
						( direction === obj.animation.direction[ 0 ] ) ? obj.animation.currentPosition = obj.animation.currentPosition + range : obj.animation.currentPosition = obj.animation.currentPosition - range;
						
						if ( obj.animation.currentPosition <= -1 && direction === obj.animation.direction[ 1 ] ) {
							var count = ( obj.animation.countElements - 1 ) * 100;
							
							obj.animation.setPosition( direction, false, count );
							obj.animation.currentPosition = ( obj.animation.countElements - 1 );
						} else if ( obj.animation.currentPosition === obj.animation.countElements && direction === obj.animation.direction[ 0 ] ) {
							obj.animation.setPosition( direction, false, "0" );
							obj.animation.currentPosition = 0;
						} else {
							var direction = obj.animation.revertSigns( direction );
							
							range = ( range * 100 );
							
							obj.animation.setPosition( direction, true, range );
						}
					} else {
						obj.animation.errorReport();
					}
				},
				setPosition: function ( direction, equal, range, speed ) {
					var
						range = range ? range : "100",
						equal = equal ? "=" : "",
						speed = speed ? speed : 500;
					
                    // Default speed animation is 500 ms
					obj.animation.element.animate( {
						marginLeft: direction + equal + range + "%"
					}, speed );
				},
				comparePosition: function ( oldPosition, newPosition ) {
					var 
						compare = oldPosition - newPosition,
						range;
					
					if ( compare === 0 )...