JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    	<ul>
        	<li><a href="#">Home</a></li>
            <li><a href="#" class="disable">Profile</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>

CSS

* {margin:0; padding:0;}

body {
	background-color:#333;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
}

nav {
	background-color:#900; 
	height:50px; 
	line-height:50px; 
	position:relative;
	width:770px;
	margin:auto;
	margin-top:80px;
}

nav ul {
	list-style:none;
}
nav ul li a {
	float:left; 
	width:150px; 
	display:block; 
	text-align:center; 
	color:#FFF; 
	text-decoration:none; 
	text-transform:uppercase;
}

nav ul li a:hover {
	background-color:#666; 
	display:block;
}

/* Cara Mendisable Menu Link */
.disable {
	pointer-events: none; 
	opacity: 0.2;
	background-color: #000;
}