JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="selected"><a href="#">Philosophy</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

CSS

nav {
  text-align:center;
  transform: rotate(-90deg) translateX(-240px) translateY(-100px);
  margin: 0;
  top: 0px;
  left: 0px;
  position: absolute;
}

nav li{
    display: inline-block;
    background-color: blue;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
    margin: 5px auto;
    padding: 1em;
}

nav li a{
  color: #fff;
}

nav li a:hover{
  background: black;
}

nav li.selected {
  background-color: purple;
}