JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "vertical">
        
        <ul>
            <li><a class = "contractor_search" href = "#">Contracts</a></li>
            <li><a class = "contractor_search" href = "#">My availability</a></li>
            <li><a class = "contractor_search" href = "#">Payment</a></li>
            <li><a class = "contractor_search" href = "#">Profile</a></li>
        </ul>
        
    </div>

CSS

a.contractor_search { background: #ffffff url(http://i.imgur.com/BRbMY.gif) no-repeat left center; background-position: 10px center; }        

a.contractor_search:hover { background: #f2f2f2 url(http://i.imgur.com/BRbMY.gif) no-repeat left center;  background-position: 10px center;}

div.vertical
{
    border:             none;
}

div.vertical ul
{   
    list-style-type:    none;
    margin:             0;
    padding:            0;
}

div.vertical ul li
{   
    margin-top:         15px;
    margin-bottom:      15px;
    margin-left:        0px;
    margin-right:       0px;
}

div.vertical ul li a
{   
    padding-right:      5px;
    padding-top:        5px;
    padding-bottom:     5px;
    padding-left:       40px;
    
    width:              120px;
}

div.vertical ul li a:link, div.vertical a:visited
{
    color:              #4576B1;
    text-align:         left;
    text-decoration:    none;
    
}

div.vertical ul li a:hover, div.vertical a:active
{     
    color:              #4576B1;
    text-decoration:    none;
    
}

body, tr, td, textarea, input, select, div
{
    font-family:    arial;
    font-size:      10pt;
    font-weight:    normal;
    color:          #000000;
}