JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container_nav">
    
    <a href="">First Page</a>
    <a href="">Second Page</a>
    <a href="">Third Page</a>
    <a href="">Fourth Page</a>
    
</div>


<p id="event_two">   
    The Event Two.   
</p>

CSS

p#event_two {
    margin: 10em 0 2em 0;
    padding: 1em;
    border: 5px solid blue;
    text-align: center;   
}


div#container_nav {
    padding: 2em;           
    background-color: #222;
    text-align: center;
}

a {
    color: #bbb;
    text-decoration: none;
    margin-right: 2em;
    font-weight: bold;

    -webkit-transition: color .5s linear;   
       -moz-transition: color .5s linear; 
            transition: color .5s linear;    
}

.green {
    color: green;                        
}

JavaScript

/* 

The set class is to fade in and out on mouse hover. 

*/


$(function() {$('p#event_two').hover(
        
    function() {
        
        $('a').addClass('green');
        
    }, function() {
        
        $('a').removeClass('green')

    });});