JSFiddle - React, Tailwind, and code Playground

HTML

<div class="surroundContainer">
	<div class="hPage firstPost">
		<section><article>
		<h1>First post,for Joey</h1>
		</article></section>
	</div>
	<div class="hPage">
		<section><article>
		<p>Way too scary for me.</p>
		</article></section>
	</div>
	<div class="hPage">
		<section><article>
		<p>Way too scary for me.</p>
		</article></section>
	</div>
	<div class="hPage">
		<section><article>
		<p>Way too scary for me.</p>
		</article></section>
	</div>
</div>

</body>

</html>

CSS

html, body {
	height:100%;

}
*{
	/* overflow: hidden; */
}
a:link {
    color: #231f20;
    text-decoration: none;
}
a:visited {
    color: #231f20;
}
a:hover {
    color: #231f20;
}
a:visited {
    color: #231f20;
}
#header {
	height: 20vh;
	background-color: #f1f1f2;

}
nav {
	float: left;
	height: 9vh;
	padding: 6.5vh 0vw 0vh 0vw;
}
nav ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

nav a {
    float: left;
    width: 20vw;
    text-decoration: none;
	height: 5vh;
	line-height: 5vh;
	background-color: none;
	padding:1vh 0 1vh 4vw;
	color: #231f20;
    
}

nav a:hover {
	color: white;
	background-color: #231f20;
	transition: 0.5s;
}

nav li {
    display: inline;

}
.wrapper {
    clear: both;
	
}

.surroundContainer {
overflow-x:scroll;
overflow-y: hidden;
white-space: nowrap;
height:80vh;
}
.hPage {
    background-color: blue;
	width:32vw;
	
    display: inline-block;
    height: 80vh;
}
.firstPost {
	background-color: grey;
}
.nav {
	width: 100vw;
	height: 20vh;
}
#logo {
	padding: 1vh 1vw;
	height: 18vh;
	width: auto;
	float: left;
}