JSFiddle - React, Tailwind, and code Playground

HTML

<a id=thelinkcontainer href="#">
<svg version="1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 10 16" style="enable-background:new 0 0 10 16;" xml:space="preserve">
<path d="M0,0v16l10-8L0,0z"/>
</svg>
<span>GO</span>
</a>

CSS

body {
  background: orange
}

a {
  position: relative; 
  display: inline-block;
  background-image: linear-gradient(to bottom,white 0%, white 50%, red 50%, red 100%); 
  height: 100px;
  width: 200px;
}

svg {  
  fill: purple;
  height: 2em;  
}

span, svg {  
  font-size: 2em;
  display: inline-block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}