JSFiddle - React, Tailwind, and code Playground

HTML

<div id="word">
    <h1><a id="h" class= "letter" href=#>H</a></h1>
    <h1><a id="e" class= "letter" href=#>E</a></h1>
    <h1><a id="l" class= "letter" href=#>L</a></h1>
    <h1><a id="l2"class= "letter" href=#>L</a></h1>
    <h1><a id="o" class= "letter" href=#>O</a></h1> 
</div>

<div id="content">
    <div id="textA">Text A</div>
    <div id="textB">Text B</div>
</div>

CSS

body {
        font-family: 'Chango', cursive;
        font-size: 115px;
        color: white;
        text-shadow: 5px 5px 5px #000;
        
        width: 100%;
        height: 100%;
        margin: 0px;
        background: blue;
        }
        
        #name {
        position:absolute; 
        height:100%; 
        width: 70%;
        display: table;
        padding: 0 15% 0 15%;
        background: black;
        }
        
        h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
        height: 1em;
        
        }
        
        a {
        /*border: 1px solid black;*/
        display: inline-block;
        line-height: 89%;
        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;
        }