JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-box">
  <div class="nav-box--links">
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
    <a href="#">Fourth item</a>
    <a href="#">Fifth item</a>
  </div>
  
  <a class="nav-box--arrow nav-box--arrow---prev" href="#"></a>
  <a class="nav-box--arrow nav-box--arrow---next" href="#"></a>
</div>

CSS

.nav-box {
  position: relative;
  padding: 24px 0;
}

.nav-box:before {
  content: "";
  
  width: 30px;
  
  position: absolute;
  top: 0;     left: 0;
  bottom: 0;
  
  border: 2px solid #222;
}

.nav-box a:hover {
  color: #017EFC;
}

.nav-box--links a {
  display: block;
  
  position: relative;
  padding-left: 42px;
  
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font: 700 14px sans-serif;
  color: #222;
}

.nav-box--links a:not(:first-child) {
  margin-top: 6px;
}

.nav-box--links a:before {
  content: "";
  
  width: 12px;
	height: 12px;
  
  position: absolute;
  top: 50%;  left: 0;
  
  margin: -8px 0 0 9px;
  
	border-radius: 50%;  
  border: 2px solid #222;
}

.nav-box--links a:hover:before {
  background-color: currentColor;
}

.nav-box--arrow {  
  display: block;
  
  width: 30px;
  height: 16px;
  
  position: absolute;
  margin-left: 2px;
  
  color: #222;
}

.nav-box--arrow:before {
  content: "";
  
  position: absolute;
  left: 50%;
  
  margin-left: -5px;
  
  border-left: 5px dashed transparent;
  border-right: 5px dashed transparent;
  
  color: currentColor;
}

.nav-box--arrow---prev {
  top: 0;
}

.nav-box--arrow---prev:before {
  bottom: 0;
  
  border-bottom: 6px solid currentColor;
}

.nav-box--arrow---next {
  bottom: 0;
}

.nav-box--arrow---next:before {
  top: 0;
  
  border-top: 6px solid currentColor;
}