JSFiddle - React, Tailwind, and code Playground

by christopher gaston

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="585px" height="65px" viewBox="0 0 585 65" enable-background="new 0 0 585 65" xml:space="preserve">
  <defs>
    <style type="text/css">
      <![CDATA[
        @font-face {
          font-family: 'OpusText';
          src: url ("image/opus.svg#myopus") format("svg");
        }
        @font-face {
          font-family: 'Utsaah';
          src: url ("image/utsaah.svg#myutsaah") format("svg");
        }
      ]]>
    </style>
  </defs>
	<text transform="matrix(1 0 0 1 24.0298 40.2761)" font-family="'Utsaah'" font-size="25">A</text>
<text transform="matrix(1 0 0 1 56.3808 40.2761)"><tspan x="0" y="0" font-family="'Utsaah'" font-size="25">A</tspan><tspan x="11.938" y="0" font-family="'OpusText'" font-size="25">#</tspan><tspan x="20.938" y="0" font-family="'Utsaah'" font-size="25">/B</tspan><tspan x="37.845" y="0" font-family="'OpusText'" font-size="25">b</tspan></text>
<text transform="matrix(1 0 0 1 122.6124 40.2761)" font-family="'Utsaah'" font-size="25">B</text>
<text transform="matrix(1 0 0 1 154.9145 40.2759)" font-family="'Utsaah'" font-size="25">C</text>
<text transform="matrix(1 0 0 1 188.2047 40.2759)"><tspan x="0" y="0" font-family="'Utsaah'" font-size="25">C</tspan><tspan x="12.928" y="0" font-family="'OpusText'" font-size="25">#</tspan><tspan x="21.927" y="0" font-family="'Utsaah'" font-size="25">/D</tspan><tspan x="39.822" y="0" font-family="'OpusText'" font-size="25">b</tspan></text>
<text transform="matrix(1 0 0 1 256.4156 40.2759)" font-family="'Utsaah'" font-size="25">D</text>
<text transform="matrix(1 0 0 1 289.7049 40.2759)"><tspan x="0" y="0" font-family="'Utsaah'" font-size="25">D</tspan><tspan x="12.927" y="0" font-family="'OpusText'" font-size="25">#</tspan><tspan x="21.927" y="0" font-family="'Utsaah'" font-size="25">/E</tspan><tspan x="38.833" y="0" font-family="'OpusText'" font-size="25">b</tspan></text>
<text...