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; /* необходимо для того, чтобы 
  спрятать верхний бордюр у первого пункта и 
  нижний бордюр у последнего пункта */  
}

ul:before, ul:after {
    content: '.';
    float: left;
    padding: 10px 0;
    width: 0;
    overflow: hidden;
}
ul:before { border-right: 1px solid #84a031; }
ul:after { border-left: 1px solid #b4d061; }

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