JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html leng="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Bla-bla-bla">
        <title>Heroes</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
    </head>
    
    <body>
              <div class="header">
               <ul class="main-navigation">
                    <li class="col"><p>Heroes</p></li>
                    <li class="col"><a href="#gerald">Gerald of Rivia</a></li>
                    <li class="col"><a href="#hawke">Hawke</a></li>
                    <li class="col"><a href="#corvo">Corvo Attano</a></li>
                    <li class="col"><a href="#batman">Batman</a></li>
                </ul>
                </div>
  
    </body>

CSS

/*  BASE FOR WHOLE WEBSITE  */

html,
body {
    font-family: "IM Fell English SC";
    font-size: 30px;
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
    padding: 0;
}


/*  MAIN NAVIGATION  */

.main-navigation {
    width: 100%;
    font-size: 0;
    list-style: none;
    margin: 0;
}

.main-navigation li {
    display: inline-block;
    width: 20%;
    font-size: 30px;
    line-height: 1.5em;
}

.main-navigation a,
.main-navigation p {
    display: block;
   
    font-size: 30px;
    line-height: 1.5em;
}

.main-navigation li a:link,
.main-navigation li a:visited {
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.7s; 
    
}

.main-navigation li a:hover,
.main-navigation li a:active {
    border-bottom: 2px solid #00cec9;
    background-color: aquamarine;
}