JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
				<li><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>

CSS

.nav {margin:20px auto; }
		.nav li {float:left; line-height: 4.3; padding:0 30px; list-style-type:none; background: red; height:53px; }
		.nav li:hover {background: orange; height:59px; margin-top:-6px;}
		.nav li a {color:#fff;}

/* У меня при наведении съезжают ссылки на 6 пикселей верх. Как это исправить?*/