JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<title>Пример горизонтального CSS списка</title>
<meta charset="utf-8">
<style>
body {
    margin: 0;
    }
 #nav_menu {
    margin: 0;
    padding: 0 10px;
    overflow: hidden;
    list-style: none;
    background: #2d2d2d;
 }
 li {
  float: left;
    padding-right: 10px;
}
 #nav_menu a {
 display: block;
 text-decoration: none;
 text-align: center;
 font-family: arial;
 font-size: 10pt;
 color: #ccc;
 padding: 5px;
 border-top: 2px solid transparent;
 }
 #nav_menu a:hover {
    background-color: #fff; color: #ccc;
 }
 #nav_menu .active { border-top: 2px solid #dd4b39; }
 </style>
 </head>
 <body>
 <ul id="nav_menu">
 <li><a href="#" class="active">Поиск</a></li>
 <li><a href="#">Блог</a></li>
 <li><a href="#">Как помочь</a></li>
 </ul>
</body>
</html>