JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<p>
Robinson rounded out the scoring finishing from a Clought corner. <a href="#" data-sparkicon="video" data-sparkicon-plus="12:02">Watch Hightlights of Dumferline vs Cowdenbeath</a>
</p><p>
Red Hot Chilli Peppers new track <a href="#" data-sparkicon="music" data-sparkicon-plus="3:51">Hear the Music</a> released last week.
</p>
<p>
    Yes I agree much has been talked about this
    <br/><a href="#" data-sparkicon="chat" data-sparkicon-plus="586">Join the Discussion</a>
</p>

<p>
    Yes I agree much has been talked about this
    <br/><a href="#" data-sparkicon="pdf">Join the Discussion</a>
</p>

CSS

p{font-family: sans-serif;padding:1em 0;}
a {
  text-decoration:none;
}

a[data-sparkicon]:after {
  padding:0.1em;
  content: attr(data-sparkicon) attr(data-sparkicon-plus);
  font-family: sparkicons;
} 

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