JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<div id="word">
    	<h1><a id="h" class= "letter" href=#>H</a></h1>

    	<h1><a class= "letter" href=#>E</a></h1>

    	<h1><a class= "letter" href=#>L</a></h1>

    	<h1><a class= "letter" href=#>L</a></h1>

    	<h1><a class= "letter" href=#>O</a></h1>

</div>

CSS

body {
    /*font-family: 'Sigmar One', cursive;*/
    font-family:'Chango', cursive;
    font-size: 115px;
    color: white;
    text-shadow: 5px 5px 5px #000;
    /* background-color: #0047b2 */
    width: 100%;
    height: 100%;
    margin: 0px;
    background: url(img/texture.png) repeat;
}
#word {
    position:absolute;
    height:100%;
    width: 70%;
    display: table;
    padding: 0 15% 0 15%;
    background: rgba(0, 71, 178, .5);
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 1em;
}
a {
    /*border: 1px solid black;*/
    display: inline-block;
    line-height: 100%;
    overflow: hidden;
}
a:visited, a:active {
    text-decoration: none;
    color: white;
    /*color: #E8E8E8;*/
}
a:link {
    text-decoration: none;
    color: white;
    text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;
}
a:hover {
    text-shadow: 5px 5px 5px #000;
    color: white;
}
#h:hover #word {
    background-color: rgba(0, 102, 0, .5);
}
@media (max-width: 1330px) {
    #word {
        width: 100%;
        padding: 0px;
    }
}
.wordBg {
    background: rgba(0, 102, 0, .5) !important;
}

JavaScript

var changeWordBg = (function (word) {
    return function (evt) {
        if (evt.target.classList.contains("letter")) {
            switch (evt.type) {
                case "mouseover":
                    word.classList.add("wordBg");
                    break;
                case "mouseout":
                    word.classList.remove("wordBg");
                    break;
                default:
            }
        }
    };
}(document.getElementById("word")));

document.body.addEventListener("mouseover", changeWordBg, false);
document.body.addEventListener("mouseout", changeWordBg, false);