JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sideNav">
  <li><a href="/history.asp">History</a></li>
  <li><a href="/mission.asp">Mission</a></li>
  <li><a href="/associations.asp">Associations</a></li>
  <li><a href="/careers.asp">Careers</a></li>
</ul>

CSS

.sideNav {
  margin:0;
  padding:0;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  width:216px;
  background-color:#017dc6;
}

.sideNav li {
  list-style-type:none;
  text-align:center;
  text-transform:uppercase;
  width:180px;
  margin: 0 auto;
  padding: 0;
}

.sideNav li a {
  width:180px;
  color:#ffffff;
  text-decoration:none;
  display:block;
  padding:18px 0;
}
.sideNav li + li a {
  border-top:1px solid #80bee3;
}