JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top-nav">
                <ul class="menu">
                    <li class="ac">
                        <a href="#">О нас</a>
                    </li>
                    <li>
                        <a href="#">Каталог продукции</a>
                    </li>
                    <li>
                        <a href="#">Продажи</a>
                    </li>
                    <li>
                        <a href="#">Новости</a>
                    </li>
                    <li>
                        <a href="#">Контакты</a>
                    </li>
                </ul>
            </div>

CSS

.top-nav ul {
    list-style-type:none;
	border-bottom:1px solid #CDCDCD;
	height:50px;
	outline:0px solid red;
	position:absolute;
    right:100px;
}

.top-nav a {
	font:normal 16px sans-serif;
	z-index:1;
	margin-top:0px;
    outline:0px solid Red;
	color:#3D3D3D;
	text-decoration:none;
	margin-left:50px;
	display: block;
}

.top-nav li {
	text-align:right;
	float: left;
}

.menu > li > a {
	line-height: 50px;
}

.top-nav a:hover {
	border-bottom: 2px solid #FFD300;
}