JSFiddle - React, Tailwind, and code Playground

by QW01_01

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>

<h1>Cупер заголовок</h1>

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;
}

JavaScript

$('h1').wrapInner(function() {
  return '<svg fill="url(#textgradient)" style="width:100%;"><text y="1em"></text></svg>';
});