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: 260px; background-color: #eee; height: 100vh; position: fixed; top: 0px; left: 0px;
    display:flex;
    flex-direction: column;
    justify-content:space-around;
}
li {
    list-style: none;
	width: 212px;
	border: 2px solid transparent;
	font-family: 'Georgia';
	font-size: 15px;
	line-height: 10px;
	color: #313658;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	margin: 0;
}