JSFiddle - React, Tailwind, and code Playground

HTML

<div id="music" class="nav">Music I Like 
    <a href="http://www.google.com"> 
        <span class="hyperspan"></span>
    </a>   
</div>

CSS

div { height: 150px; width: 250px; border: 1px solid black; position: relative; }

.hyperspan
{
    background: red;
    opacity: .3;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:1;
}