JSFiddle - React, Tailwind, and code Playground

by beaverBox

HTML

<nav class="top-nav">
	<a href="/">Главная</a>
	<a href="blog" class="active">Блог</a>
	<a href="portfolio">Портфолио</a>
	<a href="notes">Записки</a>
</nav>

CSS

nav.top-nav {
	display: block;
	text-align: center;
	padding-bottom: 5px;
}

nav.top-nav a {
	color: #aaa;
	padding: 0 1em 7px;
	text-decoration: none;
}

nav.top-nav a.active {
	border-bottom: 3px solid #ccc;
}

nav.top-nav a:link {
	color: #156f8f;
}

nav.top-nav a:link.active {
	color: #156f8f
}

nav.top-nav a:link:hover {
	border-bottom: 3px solid #156f8f;
}

nav.top-nav a:visited {
	color: #156f8f;
}

nav.top-nav a:visited:hover {
	border-bottom: 3px solid #156f8f;
}