JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="header">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="fixtures.html" class="active">Fixtures</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
  </div>
</body>

CSS

.header ul {
	list-style: none;
}

.header li {
	float: left;
}

.header a {
	width: 192px;
	padding: 5px 0px 5px 0px;
	display: block;
	background-color: #cc3333;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	font-family: Impact, sans-serif;
	font-size: 24px;
}

.header a:link, .header a:visited {
	color: #fff;
	text-decoration: none;
}

.header a:hover, .header a:active, .header a:focus {
	background-color: #cc6666;
	color: #fff;
	text-decoration: none;
}

.header .active {
	background-color: #fc0;
	color: #ccc;
}