JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_menu">
    <ul>
        <li><a href="#" title="odkaz">Odkaz</a></li> 
        <li><a href="#" title="odkaz">Odkaz</a></li>  
        <li><a href="#" title="odkaz">Odkaz</a></li>  
        <li><a href="#" title="odkaz">Odkaz</a></li>  
        <li><a href="#" title="odkaz">Odkaz</a></li>  
        <li><a href="#" title="odkaz">Odkaz</a></li>  
    </ul>
</div>

CSS

#main_menu li{list-style:none; float:left;width:auto}
#main_menu > ul > li > a{
background-color:rgba(0,0,0,0.5);
color:#fff;
text-transform:uppercase;
padding:7px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

#main_menu > ul > li{margin-right:10px;}
#main_menu > ul > li:last-child{margin-right:0px;}