JSFiddle - React, Tailwind, and code Playground

HTML

<div id='main-nav'> <a href="./football.html">Football<div class='icon'></div></a>

<a href="./basketball-.html">Basketball<div class='icon'></div></a>

<a href="./baseball.html">Baseball<div class='icon'></div></a> 
</div>

CSS

#main-nav a {
    display: block;
    float: left;
    margin: 125px 0px 0px 0px;
    color: #666666;
    border: 1px #C0C0C0 solid;
    background-color: #EEEEEE;
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    width: 106px;
    height: 78px;
    vertical-align: middle;
    line-height: 78px;
    text-align: center;
    position : relative;
}
#main-nav a .icon {
    height: 30px;
    width : 30px;
    background : red;
    position : absolute;
    top : 0;
    left  : 35px;
}
#main-nav a:hover, #main-nav .active {
    color: #666666;
    background-color: #C0C0C0;
    border: 1px #C0C0C0 solid;
}