JSFiddle - React, Tailwind, and code Playground

HTML

<ul>  
     <li><a href="">Главная</a></li>
     <li><a href="">О сайте</a></li>
     <li><a href="">Рецепты</a></li> 
    
</ul>

CSS

ul {   
  background: #9cb947;  
  border: 1px solid #9cb947;  
  overflow: hidden; /* необходимо для того, чтобы 
  спрятать верхний бордюр у первого пункта и 
  нижний бордюр у последнего пункта */  
}  

li{
    float:left;
    list-style: none;
    padding:10px; 
    border-left: 1px solid #b4d061;
    border-right: 1px solid #84a031;
    
}
a{
    color:#fff;
}