JSFiddle - React, Tailwind, and code Playground

HTML

<div id="section-support-classifications">
<div class="support-pie">
                <svg id="segments-svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" height="462.99" viewBox="0 0 954.84769 462.99301" width="954.84" enable-background="new 0 0 344.001 494" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF>
                    <g id="g3423" transform="translate(147 -2.3438e-7)">
                        
                        <!-- SEGMENT 1 -->
                        <g transform="translate(0,-31.007)">
                            <path id="seg-1" fill="#32949a" d="m330.35 494v-462.99c-128.17 0-244.55 50.48-330.35 132.64l330.35 330.35 0.002-0.002z"/>
<!--                            <path id="seg-1 shadow" fill="#32949a" d="m330.35 494v-462.99c-128.17 0-244.55 50.48-330.35 132.64l330.35 330.35 0.002-0.002z"/>-->
                        </g>
                        
                        <!-- SEGMENT 2 -->
                        <g transform="translate(330.35 -31.009)">
                            <path id="seg-2" fill="#9ed4ee" d="m330.35 163.65c-85.8-82.161-202.18-132.64-330.35-132.64v462.99l330.35-330.35z"/>
<!--                            <path id="seg-2 shadow" fill="#9ed4ee" d="m330.35 163.65c-85.8-82.161-202.18-132.64-330.35-132.64v462.99l330.35-330.35z"/>-->
                        </g>
                        
                        <!-- SEGMENT 3 -->
                        <g transform="translate(-160 126.99)">
                            <path id="seg-3" fill="#e95d5c" d="m490.48 336-330.35-330.35c-87.515 83.803-143.2 200.57-147.13 330.35h477.48z"/>
<!--                            <path id="seg-3 shadow" fill="#e95d5c" d="m490.48 336-330.35-330.35c-87.515...

SCSS

// Sass Variables
$accent-red: #e95f5c;
$accent-blue: #86c4e6;

$background-light-grey: #F1F2F3;
$background-med-grey: #EAEAEA;
$background-dark-grey: #58595B;
$background-dark-green: #247390;

$typography-dark: #58595B;

$black: #000000;
$white: #ffffff;
$off-white: #F5F5F5;

$font-museo-slab: "museo-slab",serif;
$font-museo-sans: "museo-sans",sans-serif;

// Slider Icon Colours
$icon-shadow: #e4e6e8;
$icon-bg: #ffffff;
$icon-outline: #e95f5c;
$icon-shadow-hov: #dc5a58;
$icon-bg-hov: #e95f5c;
$icon-outline-hov: #ffffff;
$icon-number: $background-dark-green;

$trans-fast: all 0.2s;


.wide-cont {
    width: 100%;
}

.half-cont {
    width: 50%;
    
    @media all and (max-width: 800px) {
        width: 100%;
        height: auto !important;
    }
}

// General styling
.site-container {
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

#section {
    &-support-classifications {
        @extend .site-container;
        
        padding: 50px 15px; 
        
        h3 {
            color: $typography-dark;
        }
        
        .support-pie {
            position: relative;
            
            .background {
                margin: 0 auto;
                display: block;
            }
            
            #segments-svg {
                overflow: visible;
                
                path {
                    transition: $trans-fast;
                    
                    &:hover {
                        transform: scale(1.05);
                        filter: url(#blur-filter);;   
                    }
                }
            }
            
            #seg-1 {
                transform-origin: right bottom;
            }
            
            #seg-2 {
                transform-origin: left bottom;
            }
            
            #seg-3 {
                transform-origin: right bottom;
            }
            
            #seg-4 {
                transform-origin: left bottom;
            }
        }
    }
   }