JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<a href="#" data-sparkicon="video" data-sparkicon-plus="12:02">Watch the Video</a>
<br>
<br>
<a href="#" data-sparkicon="music" data-sparkicon-plus="3:51">Hear the Music</a>
<br>
<br>
<a href="#" data-sparkicon="chat" data-sparkicon-plus="586">Join the Discussion</a>
<br>
<br>
<a href="#" data-sparkicon="chat">Join the Discussion</a>

CSS

a {
  font-family: sans-serif; 
  padding: 0.5em;
}

a[data-sparkicon]:after {
  content: " " attr(data-sparkicon) attr(data-sparkicon-plus);
  font-family: sparkicons;
  display:inline-block;
  margin-left: .25em;
} 

@font-face {
    font-family: "sparkicons";
    src:...