JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
  GO
<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>
</a>

CSS

body {
  background: orange
}

a {
  display: -webkit-flex; /* Safari */
  -webkit-align-items: center; /* Safari 7.0+ */
  display: flex;
  align-items: center;
  -webkit-justify-content:center;
  justify-content:center; 
  margin: 10%;
  background-image: linear-gradient(to bottom,white 0%, white 50%, red 50%, red 100%);
  padding: 5%;
}

svg
{
  fill: purple;
  height: 1em;
  vertical-align: middle;
}

#arrow-right
{
  height: 0.9em;
}