JSFiddle - React, Tailwind, and code Playground

by pierian_design

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244 222" class="image">
                            <g class="cls-1">
                                <g id="grase_period" data-name="grase period">
                                    <rect id="range" class="cls-2" width="244" height="222"/>
                                    <ellipse class="cls-3" cx="111.52" cy="209.35" rx="85.72" ry="6.65"/>
                                    <path class="cls-4"
                                          d="M140.77,114.25v-10.2H81.13v10.2c0,25.39,15.65,35.4,24.28,39a.56.56,0,0,1,0,1c-8.63,3.6-24.28,13.61-24.28,39v10.19h59.64V193.29c0-25.39-15.65-35.4-24.28-39a.56.56,0,0,1,0-1C125.12,149.65,140.77,139.64,140.77,114.25Z"/>
                                    <rect class="cls-5" x="76.72" y="97.52" width="68.46" height="6.51" rx="1.93"
                                          ry="1.93"/>
                                    <rect class="cls-5" x="76.72" y="203.46" width="68.46" height="6.51" rx="1.93"
                                          ry="1.93"/>
                                    <path class="cls-6"
                                          d="M143.24,208H78.65a1.92,1.92,0,0,1-1.93-1.93v2A1.93,1.93,0,0,0,78.65,210h64.59a1.94,1.94,0,0,0,1.94-1.94v-2A1.93,1.93,0,0,1,143.24,208Z"/>
                                    <polygon class="cls-7"
                                             points="83.55 203.46 110.95 179.42 138.34 203.46 83.55 203.46"/>
                                    <path class="cls-6"
                                          d="M143.24,102.05H78.65a1.92,1.92,0,0,1-1.93-1.93v2A1.93,1.93,0,0,0,78.65,104h64.59a1.94,1.94,0,0,0,1.94-1.94v-2A1.93,1.93,0,0,1,143.24,102.05Z"/>
                                    <g class="cls-8">
                                        <path class="cls-9"
                                             ...