JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search-modal-container">
  <div class="search-modal-navigation-tab">
    <div class="search-modal-navigation-link"><p class="x"><a href="#">
    All Events</a></p></div>
      
      
    <div class="search-modal-navigation-link">
    <img src="http://i.imgur.com/iMBRX.png" width="20" height="21" /><BR />
    All Events</div>
  
  </div>

CSS

#search-modal-container {
    height: 510px;
    width: 940px;
}
.search-modal-navigation-tab {
    background-color: #36352f;
    height: 38px;
    width: 100%;
    padding-left: 32px;
    padding-top: 2px;
}
.search-modal-navigation-link {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFF;
 
    font-size: 12px;

    float: left;

}
.x{height:32px}
.x a {position:relative;
    color: #FFFFFF; padding-top:21px;
    text-decoration: none;
    font-weight: bold;
display:block;
}
.x a:before{content:""; top:0; left:0; position:absolute; height:21px; width:100%;
    background-image: url('http://i.imgur.com/TGhDs.png');
    background-position: center 0px;
    background-repeat: no-repeat;
}
.x a:hover {
    color: #8dcdff;
    text-decoration: none;
    padding-left: 0px;
    font-weight: bold;
    background-image: url('http://i.imgur.com/TGhDs.png');
    background-position: center -21px;
    background-repeat: no-repeat;
}