JSFiddle - React, Tailwind, and code Playground

by Ponraj Paul

HTML

<div id="main-nav">
    <a href="#" class="football">Football</a>
    <a href="#" class="cricket">Cricket</a>
    <a href="#" class="tennis">Tennis</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;
    padding-left:50px;
}

#main-nav a.football{
    background:url("http://icons.iconarchive.com/icons/ampeross/qetto/32/icon-developer-icon.png") no-repeat 10px;
}
#main-nav a.cricket{
    background:url("http://icons.iconarchive.com/icons/deleket/3d-cartoon/32/Axialis-Icon-Workshop-icon.png") no-repeat 10px;
}
#main-nav a.tennis{
    background:url("http://icons.iconarchive.com/icons/deleket/mac-folders/32/Blue-Apple-icon.png") no-repeat 10px;
}
#main-nav a:hover, #main-nav .active
{
   color: #666666;
   background-color: #C0C0C0;
   border: 1px #C0C0C0 solid; 
}