JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="v-m-root" width="600" height="600" style="left: 0px; top: 0px; direction: ltr; position: absolute; box-sizing: border-box;">
    <g class="v-backgroundutil">
        <rect class="v-background-body viz-plot-background v-morphable-background"                         
              id="background-rect-a9b7bdf3-2789-4519-93e3-adb3888ac865"
              x="0" y="0" width="600" height="600" style="fill:none"></rect>
    </g>
    <defs></defs>
    <g class="v-m-main" transform="translate(0, 0)">
        <rect class="v-bound" width="600" height="600" visibility="hidden"></rect>
        <rect x="0" y="0" fill-opacity="0" width="600" height="600"></rect>
        <g class="v-m-plot" transform="translate(0,0)" style="cursor:default">
            <rect class="v-bound" width="600" height="600" visibility="hidden"></rect>
            <rect fill="#cccccc" class="v-hovershadow" style="visibility: hidden;"             
                  width="0" height="0" x="0" y="0"></rect>
            
            <g class="v-datashape" 
               style="font-size: 54px;" transform="translate(300,317.5)">
                <text id="TAG_ID_015f9795b-0494-4f6b-9cce-94ac49edc7f7"
                      class="v-datapoint v-morphable-datapoint"
                      visibility="visible"
                      font-family="'Open Sans', Arial, Helvetica, sans-serif"
                      text-anchor="middle" fill-opacity="1">uf</text>
            </g>
            
        </g>
    </g>
</svg>

CSS

body {
		    background-color: #FFFFFF;
		}
		.v-datapoint {
		    fill: #007dc0;
		    -webkit-transition: font-size .2s ease;
		    -moz-transition: font-size .2s ease;
		    -o-transition: font-size .2s ease;
		    transition: font-size .2s ease;
		}
		.v-datapoint:hover {
		    font-size: 2em;
		}