JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contentwrapper">

      <ul class="nav">
        <li class="navitem active">Online</li>
        <li class="navitem">In person</li>
        <li class="navitem">By phone</li>
        <li class="navitem">Mobile App</li>
        <li class="navitem">Inmate</li>

      </ul>
 </div>

CSS

.contentwrapper{
  position: relative;

  width: 100%;
  padding-left: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem);
  padding-right: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem - .1px);

  margin: 0 auto;
  height: 100%;

}


ul.nav{
  position: relative;
  margin: 0;
  padding: 100px 0 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
}



li.navitem{
  position: relative;
  display: inline-block;
  cursor: default;
  font-size: 1.2em;
  text-transform: uppercase;
}