JSFiddle - React, Tailwind, and code Playground

HTML

<body>	
<div class="mydiv">
				<ul id="mytestul">
					<li> <a href="#port1">Portfolio</a> </li>
					<li> <a href="#port2">Portfolio 1</a> </li>
					<li> <a href="#port3">Portfolio 2</a> </li>
					<li> <a href="#port4">Portfolio 3</a> </li>
					<li> <a href="#port5">Portfolio 4</a> </li>
					<li> <a href="#port6">Portfolio 5</a> </li>
					<li> <a href="#port7">Portfolio 6</a> </li>
					<li> <a href="#port8">Portfolio 7</a> </li>
					<li> <a href="#port9">Portfolio 8</a> </li>
					<li> <a href="#port9">Portfolio 9</a> </li>
				</ul>
			</div>
<body>

CSS

body {background:silver;}

.mydiv {
  display:table !important;
  width:100% !important;
  height:42px !important;
  margin:0px !important;
  padding:0px !important;
}

#mytestul{
  display:table-row !important;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif
}

#mytestul li{
  display:table-cell !important;
  width:10% !important;
  border-right:2px solid transparent !important;
  background:white;
  list-style:none !important;
  text-align:center !important;
  line-height:42px !important;
  position:relative;
}

#mytestul li:hover{
  background:red !important;
  cursor:pointer;
}

#mytestul li.active{
  background:red !important;
}

#mytestul li a{
  text-decoration:none;
  font-size:10px;
  color:black;
}
 
#mytestul li:last-child{
  border-right:none !important;
}