JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 275.83 58.36">
<defs>
<style>.cls-1{font-size:48px;fill:#3c3c3b;stroke:#3c3c3b;
stroke-miterlimit:10;
stroke-width:2px;font-family:TrebuchetMS, Trebuchet MS;}.cls-2{font-size:11px;
fill:#706f6f;font-family:Verdana, Verdana;}
.cls-3{letter-spacing:-0.02em;}
.cls-4{fill:url(#Dégradé_sans_nom_22);}
.cls-5{fill:url(#Dégradé_sans_nom_30);}
.cls-6{fill:url(#Dégradé_sans_nom_35);}
.cls-7{fill:url(#Dégradé_sans_nom_43);}

svg:hover .cls-4{fill:url(#Dégradé_sans_nom_22b);}
svg:hover .cls-5{fill:url(#Dégradé_sans_nom_30b);}
svg:hover .cls-6{fill:url(#Dégradé_sans_nom_35b);}
svg:hover .cls-7{fill:url(#Dégradé_sans_nom_43b);}
</style>

<linearGradient id="Dégradé_sans_nom_22" x1="117.13" y1="38.63" x2="146.82" y2="8.95" gradientUnits="userSpaceOnUse"> 
<stop offset="0" stop-color="#db73ab"/>
<stop offset="1" stop-color="#d6007f"/>
</linearGradient>
<linearGradient id="Dégradé_sans_nom_22b" x1="117.13" y1="38.63" x2="146.82" y2="8.95" gradientUnits="userSpaceOnUse"> 
<stop offset="0" stop-color="#69c8f3"/>
<stop offset="0.65" stop-color="#22a7d9"/>
<stop offset="1" stop-color="#0097cc"/>
</linearGradient>

<linearGradient id="Dégradé_sans_nom_30" x1="158.79" y1="38.63" x2="188.47" y2="8.95" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a8c813"/>
<stop offset="0.51" stop-color="#81bc23"/>
<stop offset="1" stop-color="#5fb130"/>
</linearGradient>
<linearGradient id="Dégradé_sans_nom_30b" x1="158.79" y1="38.63" x2="188.47" y2="8.95" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#69c8f3"/>
<stop offset="0" stop-color="#cecece"/>
<stop offset="0.59" stop-color="#989898"/>
<stop offset="1" stop-color="#777776"/>
</linearGradient>

<linearGradient id="Dégradé_sans_nom_35" x1="199.68" y1="38.63" x2="229.37" y2="8.95" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#69c8f3"/>
<stop offset="0.65" stop-color="#22a7d9"/>
<stop offset="1"...