JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="svg-global">
    <defs>  
        <linearGradient id="textgradient">  
            <stop stop-color="#1dcbb0" offset="0%"/>  
            <stop stop-color="#2ecc72" offset="33%"/>  
            <stop stop-color="#2394e4" offset="66%"/>  
            <stop stop-color="#1ccab4" offset="100%"/>  
        </linearGradient>  
    </defs>  
</svg>

<svg fill="url(#textgradient)">     
    <text y="1em">Отправить</text>  
</svg>

CSS

.svg-global {
	position: absolute;
	left: -9999px;
	top: 0;
	height: 0;
	width: 0;
}
svg {
    font-size: 60px;
    min-width: 1em;
    min-height: 1em;
    display: inline-block;
}