JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<script src="http://keith-wood.name/js/jquery.svg.js"></script>
<script src="http://keith-wood.name/js/jquery.svgdom.js"></script>
<div id="#svgbasics">
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="300"
      height="300">
      <g id="svg_group">
        <rect id="nerner" x="0" y="0" width="100" height="100" fill="brown"/>
      </g>
      <g id="logo" fill="teal">
          <polygon points="0.5462,1.8974 0.4979,1.905 0.3099,1.905 0.0712,1.7551 0.0001,1.5189 0.0001,0.0025 0.4877,0.5512 0.6757,0.6909 0.7519,0.7112 0.9805,0.7112 1.3717,0.8204 1.679,1.11 1.8593,1.844 1.7527,2.1412 1.5495,2.347 1.5495,2.2581 1.5418,2.2301 1.4733,2.1666 1.4529,2.159 1.2878,2.1895 1.1964,2.2555 1.1177,2.3343 1.0669,2.4333 1.0618,2.4994 1.2015,2.6695 1.3056,2.6899 1.3666,2.6899 1.3665,2.6899 1.364,2.6924 1.2701,2.7483 1.2345,2.7635 1.2116,2.7737 1.0338,2.8042 0.7849,2.7356 0.6376,2.6137 0.597,2.2682 0.8611,1.938 0.8332,1.5799 0.6528,1.5189 0.4446,1.5824 0.3887,1.6612 0.3887,1.7958 0.4115,1.8263 0.4954,1.8872"/>
      </g>
    </svg>
</div>

CSS

svg {
  border: 1px solid #ddd;
  margin: 10px;
  padding: 0;
}

.clicked {
    stroke-width: 5;
    stroke: rgb(255,255,0)
}