JSFiddle - React, Tailwind, and code Playground

HTML

<div class="meny"> <!--Оказывается горизонтальное меню на CSS делается по другому принципу нежели то, меню, что я
                                                         делал для своего сайта "Эволюция и происхождение человека, а именно через списки.-->
                                           <ul>
                                        <li> <a href="index.html">Главная </a> </li>
                                           <li> <a href="info.html"> Важная информация </a> </li>
                                   <li> <a href="histori.html"> История </a> </li>
                                   <li> <a href="osebe.html"> О себе </a> </li>
                                   <li> <a href="vopros.html"> Вопросы Ответ  </a> </li>
                                   <li> <a href="works.html"> Виды работ </a>  </li>
                                   <li> <a href="prais.html"> Прайс-лист </a> </li>
                                   <li> <a href="contact.html"> Вызов мастера </a> </li>  
                                 </ul>  
                                  </div>

CSS

body { background: gray; }
.meny {position: absolute;  
                                 top: 120px;
                                 left: 45px;}
                        
                         li {display: inline-block;
                          margin: 10px;
                                 width: 100px;
                                 height: 56px;
                                /* word-wrap: break-word;*/
                          } /*С меню я разобрался, теперь буду прописывать стили для ссылок.*/
                                
                        li .sl a { width: 100px;
                                  height: 56px;
                                  word-wrap: break-word;}       
                                
                                 a {/*display: block;*/
                                 font-size: 18px;
                                 font-weight:bold;
                                 color: #FFF700;
                                        text-decoration:none;
                                        outline: none;} /*Убираем появление пунктирной линии при нажатии на ссылку. Для Мозиллы.*/
                                        
                                 a:hover {background: url(../images/glavn2.jpg) no-repeat;
                                                           padding: 18px;
                                                           width: 100%;
                                                           height: 56px;}