JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
		<a href="#first">Option</a>
		<a href="#second">Option</a>
		<a href="#third">Option</a>
		
	</nav>
	
	<article>
		<section id="first">
			<h1>First title</h1>
		</section>
		<section id="second">
			<h1>Second title</h1>
		</section>
		<section id="third">
			<h1>Third title</h1>
		</section>
	</article>

CSS

body,html {
		display:block;
		width: 100%;
		height: 100%;
		background: black;
		color:white;
		padding: 0;
		margin: 0;
		font-family: Helvetica, sans-serif;
	}
	nav {
		position:fixed;
		top: 0;
		width: 100%;
		z-index: 9999;
		background: black;
	}
	article {
		position: relative;
		padding-top: 5em;
	}
	article section {
		position: absolute;
		opacity: 0;
		width: 100%;
	} 
	article section:target {
		left: 0;
		opacity: 1;
		z-index: 9999;
	}
	article section h1 {
		position: absolute;
		top: -1000em;
		left: 0;
		font-size: 4em;
		width: 100%;
		text-shadow: 0 998em 2 em #fff;
		transition: text-shadow 1.5s;
		-webkit-transition: text-shadow 1.5s;
		-moz-transition:text-shadow 1.5s;
	}
	nav {
		display:block;
		width: 100%;
		padding: 2em;
		text-align: center;
	}
	nav a {
		color: white;
		text-decoration: none;
		padding: 1em 2em;
		margin-right: 1em;
	}
	nav > a:hover {
		border-bottom: .5em solid #c00;
	}