JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример горизонтального CSS списка</title>
<style type="text/css">
body {margin: 0;}
#nav_menu {width: 100%;}
#nav_menu ul {list-style: none;}
#nav_menu a {
float: left;
height: 100%;
background-color: #2d2d2d;
text-decoration: none;
text-align: center;
padding:7px;
font-family: arial;
font-size: 10pt;
color: #cccccc
}
#nav_menu a:hover {background-color: #4c4c4c; color: #cccccc;}
span {border-top: 2px solid #dd4b39;}
</style>
</head>
<body>
<div id="nav_menu">
<ul>
<li><a href="#"><span>Поиск</span></a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Как помочь</a></li>
</ul>
</div>
</body>
</html>