JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Horizontal List</h2>

<ul class="menu">
  <li>Java Script</li>
  <li>Java Script CSS</li>
 </ul>  
<ul class="menu">
  <li style="width:80%">Script</li>
  <li>width changed based on content </li>
 </ul>

CSS

.menu {
    padding: 0px;
}

.menu li {
    display: inline;
}

.menu li  {
    background-color: black;
    color: red;
    padding: 10px 50px 0px 0px;
       border-radius: 4px 4px 0 0;

}