JSFiddle - React, Tailwind, and code Playground

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;
                
            }
        }