JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
  <a class="menu-item"><span class=""></span>
    Heading title one
  </a>
  <a class="menu-item selected"><span class=""></span>
      Heading title one
  </a>
  <a class="menu-item"><span class=""></span>
      Heading title one
  </a>
  <a class="menu-item"><span class=""></span>
      Heading title one
  </a>
  <a class="menu-item"><span class=""></span>
      Heading title one
  </a>
</nav>

CSS

.menu {
  width:300px;
  margin-bottom: 15px;
  list-style: none;
  border-right: 1px solid #dbe2ff;
  border-radius: 3px;
}

a {
  text-decoration: none;
}
.menu-item {
    text-align: center;
  color: #9fa9a9;
  position: relative;
  display: block;
  padding: 40px 0;
}

.menu-item.selected {
  font-weight: bold;
  color: #636c6c;
  cursor: default;
  background-color: #fff;
}

.menu-item.selected:before {
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  width: 11px;
  content: "";
  background-color: #5dca88;
}