JSFiddle - React, Tailwind, and code Playground

by Harmonix Motion

HTML

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 500 500">
  <g id="UrTavla">
    <circle fill="white" style="fill:#F5F5DC;stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">
    </circle>
  <text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em" text-anchor="middle" alignment-baseline="middle" font-size="90">8</text>

  </g>
</svg>

CSS

circle {
            transition:-webkit-transform 0.5s, fill 0.5s;
        }

      circle:hover {
        fill: grey;
        -webkit-transform: scale(1.2, 1.2);
      }