JSFiddle - React, Tailwind, and code Playground

by Ryan J

HTML

<?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
    <a onmouseover="setText()" onmouseout="removeText()">
      <rect x="49" y="53" stroke="#FFFFFF" stroke-miterlimit="10" width="104" height="104" />
      <text transform="matrix(1 0 0 1 72.3335 109.001)" fill="#FFFFFF" font-family="'Arial-BoldMT'" font-size="12">This is test</text>
    </a>
  </svg>

  <div id="default">I AM DEFAULT TEXT</div>
  <div id="changin-text"></div>
  <script>
  function setText() {
  var rollover_text = "Chnaged Text";

  $('#default').hide();
  $('#changing-text').text(rollover_text).show();
}

function removeText() {
  $('#default').show();
  $('#changing-text').hide();
}
</script>