JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<svg class="newton-svg" height="192" width="476">
        
        <!-- labels -->
        <text class="yLabel curve_label" data-id="yLabel" data-name="Y Label" transform="translate(10,115)rotate(-90)" style="font-size: 12px; font-weight: normal; font-style: normal; font-family: Roboto, &quot;DejaVu Sans Condensed&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; text-decoration: none; fill: rgb(0, 0, 0); cursor: pointer; pointer-events: all; dominant-baseline: central; text-anchor: start;">Y-Axis</text>
        <text class="ySubLabel curve_label" data-id="ySubLabel" data-name="Y SubLabel" transform="translate(10,113)rotate(-90)" style="font-size: 16px; fill: rgb(0, 0, 0); cursor: pointer; pointer-events: all; dominant-baseline: central; text-anchor: middle;"> </text>

        <text class="xLabel curve_label" data-id="xLabel" data-name="X Label" transform="translate(218.5,175)rotate(0)" style="font-size: 12px;font-weight: normal;font-style: normal;font-family: Roboto, &quot;DejaVu Sans Condensed&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;text-decoration: none;fill: rgb(0, 0, 0);cursor: pointer;pointer-events: all;dominant-baseline: central;text-anchor: start;">X-Axis</text>
        <text class="xSubLabel curve_label" data-id="xSubLabel" data-name="X SubLabel" transform="translate(220.5,190)rotate(0)" style="font-size: 16px; fill: rgb(0, 0, 0); cursor: pointer; pointer-events: all; dominant-baseline: central; text-anchor: middle;"> </text>

        <text class="yLowerLabel curve_label" data-id="yLowerLabel" data-name="Lower Chart Y Label"></text>
        <text class="yLowerSubLabel curve_label" data-id="yLowerSubLabel" data-name="Lower Chart Y SubLabel"></text>
    </svg>