JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Work</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <p>Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus.</p>
</div>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}