JSFiddle - React, Tailwind, and code Playground

by pmamode

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="77px" height="27px" viewBox="0 0 77 27" enable-background="new 0 0 77 27" xml:space="preserve">
<a xlink:href="https://mail.yahoo.com/d/folders/1" >
                <text transform="matrix(1 0 0 1 7 20)" font-family="'Courier New'" font-size="12">Abracadabra</text>
</a>
</svg>

<a>test</a>

CSS

/* As SVG does not provide a default visual style for links,
   it's considered best practice to add some */

@namespace svgns url(http://www.w3.org/2000/svg);

svgns|a {
  cursor: pointer;
}

svgns|a text {
  fill: blue; /* Even for text, SVG use fill over color */
  text-decoration: underline;
}

svgns|a:hover, svgns|a:active {
  outline: dotted 1px blue;
}