JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="footer-nav">
  <li><a href="#">Home Page</a></li>
  <li><a href="#">About Joomla</a></li>
  <li><a href="#">Online Store</a></li>
  <li><a href="#">Wrapper</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact us</a></li>
</ul>

CSS

ul {
    
}
ul {
    margin-top: 20px;    
}

li {
 height: 8px;
 border-left: 1px solid black; 
 float: left;
}

li:first-child {
     border:none;   
}

li a {
 padding: 5px 10px;  
 font-size: 14px; 
 color: #222;
 display: block;
 margin-top: -13px;
    zoom:1;
}

li a:hover {
  background: silver;   
}