JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.j"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="http://bigspotteddog.github.com/ScrollToFixed/jquery-scrolltofixed-min.js"></script>
<aside id="navbar">
  <nav class="navbar-expand-sm">
    <div id="navbar-links" class="navbar-collapse collapse">
      <ul>
        <li>
          <a href="" class="nav-link-2">
                            Home
                        </a>
        </li>
        <li>
          <a href="" class="nav-link-2">
                            About
                        </a>
        </li>
        <li>
          <a href="" class="nav-link-2">
                            Portfolio
                        </a>
        </li>
        <li>
          <a href="" class="nav-link-2">
                            Contact
                        </a>
        </li>
        <li>
          <a href="">
                            White
                        </a>
        </li>
      </ul>
    </div>
  </nav>
</aside>

CSS

#navbar {
  display: block;
  height: 100%;
  height: 100vh;
  width: 5.5rem;
  position: fixed;
  top: 0;
  right: 0;
  border-left: 2px solid $white;
  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.2);
}

nav {
  height: 100%;
}

#navbar-links {
  height: 100%;
}

ul {
  display: flex;
  height: 100%;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

li {
  padding: 2rem;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  transform-origin: center center;
}

li:last-child {
  margin-top: auto;
}