JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_menu">
<div class="moduletablemain_menu">
<ul class="menu">
<li class="item-468 current active">
<a href="/joomla8/">Главная</a>
</li>
</ul>
</div>
</div>

CSS

div.moduletablemain_menu {
  display: block;
  position: relative;
  width: 1014px;
  height: 30px;
  padding: 16px 18px;
}

div.moduletablemain_menu ul {
  padding: 0px;
  margin: auto;
  
}

div.moduletablemain_menu li {
  float: left;
  list-style-type: none;
  padding-right: 7px;
  line-height: 30px;   
}

div.moduletablemain_menu li:last-child {
  padding-right: 0; 
  padding-left: 2px;
}

div.moduletablemain_menu li:first-child {
  padding-right: 8px;  
}

div.moduletablemain_menu a {   
   display:block;
   line-height: 30px; 
   text-decoration: none;   /* удаляем подчеркивание ссылок */ 
   color: #000000;
   background-color: #ecf1eb;
   border-radius: 5px;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 4px;
   padding-bottom: 4px;
   font: 14px sans-serif;
}
  
div.moduletablemain_menu a:hover {   
   text-decoration: none;   
   background-color: #000000;
   color: #ffffff;