JSFiddle - React, Tailwind, and code Playground

HTML

<div class="seven columns navigation" id="navigation">
    <a href="#page1" id="page1">Page1</a>
    <a href="#page2" id="page2">Page2</a>
    <a href="#page3" id="page3">Page3</a>
    <a href="#page4" id="page4">Page4</a>
    <a href="#page5" id="page5">Page5</a>
 </div>

CSS

.navigation a {
  font-size: 1.2em;
  display: inline-block;
  margin-top: 20px;
  padding: 8px 12px;
  color: #666666;
  font-weight: bold; }

.navigation a:hover{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

.navigation a.active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

#navigation a .active-link{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

#page1:target, #page2:target, #page3:target, #page4:target, #page5:target{
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}