JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
  		<li><a href="#Home" class="scroll active">Home</a></li>
		<li><a href="#about" class="scroll">About</a></li>
		<li><a href="#portfolio" class="scroll">Portfolio</a></li>
        <li><a href="#skills" class="scroll">Skills</a></li>
        <li><a href="#blog" class="scroll">blog</a></li>
        <li><a href="#cv" class="scroll">CV</a></li>
		<li><a href="#contact" class="scroll">Contact</a></li>
  </ul>
 </nav>

CSS

nav {
	font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
	line-height: 1.5; /*for display only*/
	width: 50%;
	margin-bottom: 20px;
}
nav ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
nav ul a {
	display: block;
	text-align: center;
	color: #FFF;
	font-size: 2em;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
}
nav ul a:hover, a:active {
	color: #FFFFFF;
	background-color: #242424;
}
.active {
	background-color: #FFF;
	color: #5f021f;
	text-decoration: underline;
	border: 5px solid #5f021f;
}


nav ul li {
	background-color: #5f021f;
	border-bottom: 1px solid #2d010f;
}

JavaScript

$('li a').click(function(e) {
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    });