JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <a href="http://www.google.com" target="_blank">Home</a>
    <a href="http://www.yahoo.com" target="_blank">About</a>
    <a href="http://www.thislinkleadsnowhere.org" target="_blank">Services</a>
    <a href="http://www.wikipedia.org/" target="_blank">Resources</a>
    <a href="#">Events</a>
</nav>

<ol>
    <li><span style="color:red">Red</span> (:link) default appearance.</li>
    <li><span style="color:orange">Orange</span> (:visited) links that have been previously accessed.</li>
    <li><span style="color:yellow">Yellow</span> (:hover) links that are hovered upon.</li>
    <li><span style="color:green">Green</span> (:active) links that are clicked and in the "down" state.</li>
</ol>
    
<small>Note how the "Services" and "Events" links work.</small>

CSS

body{background-color:#bbb; font-family:sans-serif; padding:20px;}
ol{clear:both;}
li{line-height:2em;}
span{text-shadow:1px 1px #000;}

nav a {
    background: #222;
    display:block;
    float:left;
    
    padding:15px;
    width:auto;
}

/* Pseudo-class declaration _must_ be in the following order: */

nav a:link {
    /* standard link */
    color: red;
}

nav a:visited {
    /* link detects that the document it leads to has been previously accessed */
    color: orange;
}
nav a:hover {
    /* link is hovered upon */
    color: yellow;
}
nav a:active {
    /* link is clicked and in the "down" state */
    color: green;
}