JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-nav">
<a href="./football.html">Football </a>
<a href="./basketball-.html">Basketball</a>
<a href="./baseball.html">Baseball</a>
</div>

CSS

#main-nav a
{     
   display: block;
   float: left;
   margin: 125px 0px 0px 0px;
   color: #666666;
   border: 1px #C0C0C0 solid;
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   width: 115px;
   height: 78px;
   vertical-align: middle;
   line-height: 78px;
   text-align: center; 
    background:url(http://img6a.flixcart.com/image/ball/4/g/g/vector-x-football-england-100x100-imade784dbrjbdzp.jpeg) no-repeat 50% 99% #EEEEEE;
    background-size:25px
}
#main-nav a:nth-child(2){
    background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/american_football_icon.jpg) no-repeat 50% 99% #EEEEEE;
    background-size:25px
}
#main-nav a:nth-child(3){
    background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/archery_icon.jpg) no-repeat 50% 99% #EEEEEE;
    background-size:25px
}
#main-nav a:hover, #main-nav .active
{
   color: #666666;
   background-color: #C0C0C0;
   border: 1px #C0C0C0 solid;
}