JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<div class="menucontent">
    <h1 id="home">Home</h1>
    <h1 id="music">Music</h1>
    <h1 id="videos">Videos</h1>
    <h1 id="news">News</h1>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Advent+Pro:700);
@-webkit-keyframes turnonlights {
    0%        { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
    1%        { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
    4%        { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
    7%        { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
    8%        { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
    12%        { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
    22%        { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
    23%        { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
    26%        { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
    28%        { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
    34%        { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
    36%        { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
    42%        { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
    55%        { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
    60%        { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
    63%        { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
    67%        { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
    72%        { color: #6d5669;...

JavaScript

var home = document.getElementById('home');
var music = document.getElementById('music');
var videos = document.getElementById('videos');
var news = document.getElementById('news');

home.onclick = function() {
       music.className = 'none';
       videos.className = 'none';
       music.className = 'none';
       news.className = 'none';
       this.className = 'animate';
};
music.onclick = function() {
       home.className = 'none';
       videos.className = 'none';
       music.className = 'none';
       news.className = 'none';
       this.className = 'animate';
};