JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

CSS

* {margin: 0; padding: 0;}
div {
    height: 100vh;
    width: 100%;
}
.div1 {background-color: red;}
.div2 {background-color: green;}
.div3 {background-color: blue;}
ul {width: 40%; min-width:150px;background-color: #eee; height: 100vh; position: fixed; top: 0px; left: 0px;}
li {
    list-style: none;
	height: 31px;
	border: 2px solid transparent;
	font: 15px/18px 'Georgia';
	color: #313658;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	margin: 10% 0;
}