JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<a href="#">
	
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 23">
  <path d="M9 23c-.1 0-.2 0-.3-.1C8.3 22.5 0 14.6 0 8.5 0 3.8 4 0 9 0s9 3.8 9 8.5c0 6.1-8.3 14-8.7 14.4-.1.1-.2.1-.3.1zM9 1C4.6 1 1 4.4 1 8.5c0 5 6.4 11.7 8 13.3 1.6-1.6 8-8.3 8-13.3C17 4.4 13.4 1 9 1z" />
  <path fill="--var(--custom-color)" d="M9 12c-1.9 0-3.5-1.6-3.5-3.5S7.1 5 9 5s3.5 1.6 3.5 3.5S10.9 12 9 12zm0-6C7.6 6 6.5 7.1 6.5 8.5S7.6 11 9 11s2.5-1.1 2.5-2.5S10.4 6 9 6z" />
</svg>
Foo
</a>

CSS

--custom-color: purple;
--custom-color2: blue;
a {
	color: blue;
}