qBbyaQg

index.html

<div id="root"></div>

qbbyaqg.markdown

qBbyaQg

A Pen by Luis Fernando Gutiérrez Romo on CodePen.

License.

script.babel

ReactDOM.render(
	<section>
		<nav>
			<ul>
				<li id="home" class="item-nav">
					<a href="#home">Home</a>
				</li>
				<li id="about" class="item-nav"><a href="#<about">About</a></li>
			</ul>
		</nav>
	</section>,
	document.getElementById("root")
);

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.css

* {
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
	color: black;
}
.welcome {
	width: 100%;
	height: 100vh;
	align-content: center;
	display: flex;
}
#home {
	display: flex;
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	z-index: 10;
	justify-content: flex-start;
}
#about {
	display: flex;
	top: 0;
	left: -40px;
	position: fixed;
	width: 100%;
	z-index: 10;
	justify-content: flex-end;
}
nav {
	height: 40px;
	background-color: graytext;
}
nav ul {
	list-style: none;
}
.item-nav {
	display: inline;
	padding: 1rem;
}