JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_box">
  
  <div class="flexbox_images">
    <a href="">
    <div class="image_background image_background_left"> 
    <div class="fleximagebox_link">Buy
    <div class="main_black_bar">&nbsp;</div></div></div></a>
    <a href=""><div class="image_background image_background_right"> <div class="fleximagebox_link"><div class="main_black_bar">&nbsp;</div>Sell</div></div></a>
  </div>
  
</div>

CSS

/* ----- HERE IS ALL THE CODE I'VE TRIED TO GET RID OF THE HOVER ----- */
.fleximagebox_link:hover, a.fleximagebox_link:hover, a .fleximagebox_link:hover, .fleximagebox_link a:hover, .fleximagebox_link:hover a, a .fleximagebox_link p:hover, .image_background:hover, .image_background:hover a, a .image_background:hover, .image_background.fleximagebox_link a:hover, a .image_background.fleximagebox_link:hover {
  text-decoration: none!important; 
}



.main_box {
  background: white;
  height: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  display : -webkit-flex;
  display : -ms-flexbox;
  display : flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align:center;
	align-items: center;
  overflow: hidden;
}

.main_box .flexbox_images {
  color: white;
  width: 100%;
  padding: 0px;
  overflow: auto;
  display : -webkit-flex;
  display : -ms-flexbox;
  display : flex;
}
.flexbox_images a {
  -webkit-box-flex: 1;            
  -moz-box-flex: 1;                               
  -webkit-flex: 1;                
  -ms-flex: 1;                   
  flex: 1;
  width: 100%; 
  display : -webkit-flex;
  display : -ms-flexbox;
  display : flex;
}
.image_background {
  height: 250px; 
   margin: 0 auto;
  -webkit-box-flex: 1;            
  -moz-box-flex: 1;                               
  -webkit-flex: 1;                
  -ms-flex: 1;                   
  flex: 1;
  display : -webkit-flex;
  display : -ms-flexbox;
  display : flex;
	-webkit-align-items: center;
	-ms-flex-align:center;
	align-items: center;
  max-width: 101%;
}
.image_background_left {
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(http://pipsum.com/350x240.jpg);
    justify-content: flex-end;
  margin-right: -1px;
}
.image_background_right {
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(http://pipsum.com/350x240.jpg);
   ...