JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
<ul class="navigation">
  <li class="first">
    <a href="#" title="Home Page">Home</a>
  </li>
    <li class="line" />
  <li>
    <a href="#">About&ensp;us</a>
  </li>
    <li class="line" />
  <li>
    <a href="#">What&ensp;we&ensp;cover</a>
  </li>
    <li class="line" />
  <li>
    <a href="#">Monitoring&ensp;agencies</a>
  </li>
    <li class="line" />
  <li>
    <a href="#">Publishers</a>
  </li>
    <li class="line" />
  <li>
    <a href="#">News</a>
  </li>
    <li class="line" />
  <li>
    <a href="#">Contact&ensp;us</a>
  </li>
  <span></span>
</ul>
</div>

CSS

#navigation {
	text-align: justify;
}

#navigation ul span {
  	display: inline-block;
  	position: relative;
    width: 100%;
  	height: 0;
}

#navigation ul {
	display: inline;
	list-style: none;
}

#navigation ul li {
	display: inline
}

#navigation ul li.line {
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 1px;
    background-color: #ccc;
    height: 24px;
    position: relative;
    top: 5px;

}

#navigation ul li a {
	display: inline;
}
	
#navigation ul li.last a {
	border-right: none;
}