JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="col span_4_of_12 productcat">

</a>

CSS

a.productcat{
	background: -webkit-linear-gradient(left, #ea1f23, #ea1f23 70%, black 70%, black);
	border-radius:10px;
	width:300px;
  height:100px;
  padding:20px 50px;
  display:block;
  -webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
  
}

a.productcat:hover{
	background:black;

}