JSFiddle - React, Tailwind, and code Playground

by technik300

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <nav class="menu">
	  <ul class="menu__list">
	    <li class="menu__item" id="main"><a href="#" class="menu__link">Главная</a></li>
			<li class="menu__item"><a href="#" class="menu__link">Быстрый старт</a></li>
			<li class="menu__item"><a href="#" class="menu__link">Новости</a></li>
			<li class="menu__item"><a href="#" class="menu__link">Форум</a></li>
			<li class="menu__item"><a href="#" class="menu__link">Личный кабинет</a></li>
		</ul>
	</nav>
</body>
</html>

SCSS

ul,li{
	list-style: none;
	margin: 0;
	padding: 0;
}


a{
	text-decoration: none;
	color: #888;
	transition: all .35s ease-out;
}

.menu{
	margin-left: 50px;
	&__list{
		display: flex;
	}

&__item{
    padding: 20px 13px 0px 13px;
    /*border-top: 12px solid transparent;*/ /* бордюр есть всегда, но прозрачный*/
    box-shadow: inset 0 0px 0 0 transparent;
    transition: box-shadow 0.4s ease;
    &:hover{
    box-shadow: inset 0 12px 0 0 red;
    }
  }

	#main{
		/* border-top: 12px solid #09d; */
    box-shadow: inset 0 12px 0 0 #09d;
	}

	&__link{
		&:hover{
			color: #000;
		}
	}
}