JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Горизонтальный список</title>

 </head>
 <body>
 
 <div id="menu_tovaru">
  <ul class="hr">
   <li>Мчади</li>
   <li>Када на мацони</li>
   <li>Пахлава</li>
   <li>Кчуч</li>
   <li>Лилибдж</li>
      <li>Лилибдж</li>
         <li>Лилибдж</li>
            <li>Лилибдж</li>
               <li>Лилибдж</li>
                  <li>Лилибдж</li>
  </ul>
  </div>
  
 </body>
</html>

CSS

div#menu_tovaru{
border: 1px solid #000;
width:430px;
position: fixed;
margin:10px 0 0 10px;
box-sizing:border-box;
}
  
  
  
  ul.hr {
    margin: 0; /* Обнуляем значение отступов */
    padding: 4px;
   }
   ul.hr li {
    display: inline-table; /* Отображать как строчный элемент */
    border: 1px solid #000; /* Рамка вокруг текста */
 width:100px;
height:100px;


    }